如何正确使用 postMessage 通过 html5 和现代浏览器进行跨域消息传递？我仍然收到错误

发布于 2024-12-08 10:39:15 字数 2318 浏览 0 评论 0原文

我确信这里出了问题，但我无法完全指出它......示例此处表现良好，控制台上没有任何通知或错误，因此这意味着我的浏览器支持使用 html5 进行跨域消息传递（当然是这样，它是 Chrome 14..）。

我的代码或多或少执行以下操作：WebsiteA.com 中加载的脚本创建了一个 iframe 并将其附加到 WebsiteA.com 的文档中。附加的框架将包含 WebsiteB.com，加载时，它必须向其父级 WebsiteA.com 发送一条消息，告诉它 WebsiteB.com 已准备好接收一些 JSON。当 WebsiteA.com 收到此消息时，它会发回 JSON。

因此 WebsiteA.com 在之前有一行，如下所示：，在 load-my-iframe.js 内，我有以下内容：

var child = document.createElement('iframe');
child.src = 'http://WebsiteB.com/child.html';

var body = document.getElementsByTagName('body')[0]
body.appendChild(child);

var SomeJSON = {"something" : "that WebsiteB should have"};

window.onmessage = function (e) {
    if (e.origin === 'http://WebsiteB.com' && e.data === 'ready') {
            e.source.postMessage(SomeJSON, 'http://WebsiteB.com');
    }
}

这样就创建了 iframe 元素，附加它到WebsiteA.com 的文档并等待它说它已准备好（我猜......）。在 WebsiteB.com 上，我有文件 child.html，它是 WebsiteA.com 文档中加载的 iframe 的 src，该文件具有以下内容：

<!DOCTYPE html>
<html lang="pt">
    <head>
        <title>WebsiteB.com</title>
        <script type="text/javascript">
            window.onload = function () {
                window.parent.postMessage('ready','*');
            }

            window.addEventListener('message', receiveMessage, false);
            function receiveMessage(event) {
                if (event.data.something === "that WebsiteB should have") {
                    document.write('It worked!');
                }
            }
        </script>
    </head>
    <body>
    </body>
</html>

现在奇怪的东西：

遗憾的是我不拥有WebsiteA.com 和 WebsiteB.com，但我设法在一个顶级域和一个子域（以 .no.de 结尾）之间工作。它确实有效，但在 Google Chrome 14 的控制台中，我得到经典的 Unsafe JavaScript attempts to access frame with URL http:// WebsiteA.com/ 来自 URL http://WebsiteB.com/child.html 的框架。域、协议和端口必须匹配。。来自 html5demos 的示例工作正常，没有此错误。

为什么会出现此错误以及如何消除它？

原文

I'm sure something is wrong here but I can't quite put a finger on it... The example here behaves just fine with no notices or errors on the console, so it means my browser supports cross domain messaging with html5 (of course it does, it's Chrome 14..).

My code does more or less the following: A script loaded in WebsiteA.com created an iframe and appends it to WebsiteA.com's document. The frame appended will contain WebsiteB.com and when it's loaded, it must send a message to it's parent, WebsiteA.com, to tell it that WebsiteB.com is ready to receive some JSON. When WebsiteA.com get's this message, it sends back the JSON.

So WebsiteA.com has a line just before </body> just like this: <script scr="http://WebsiteB.com/load-my-iframe.js" type="text/javascript"></script>, and inside the load-my-iframe.js, I have the following:

var child = document.createElement('iframe');
child.src = 'http://WebsiteB.com/child.html';

var body = document.getElementsByTagName('body')[0]
body.appendChild(child);

var SomeJSON = {"something" : "that WebsiteB should have"};

window.onmessage = function (e) {
    if (e.origin === 'http://WebsiteB.com' && e.data === 'ready') {
            e.source.postMessage(SomeJSON, 'http://WebsiteB.com');
    }
}

So that creates the iframe element, appends it to WebsiteA.com's document and waits for it to say it's ready (I guess...). On WebsiteB.com, I have the file child.html that is src of the iframe loaded in WebsiteA.com's document, and that file has the following:

<!DOCTYPE html>
<html lang="pt">
    <head>
        <title>WebsiteB.com</title>
        <script type="text/javascript">
            window.onload = function () {
                window.parent.postMessage('ready','*');
            }

            window.addEventListener('message', receiveMessage, false);
            function receiveMessage(event) {
                if (event.data.something === "that WebsiteB should have") {
                    document.write('It worked!');
                }
            }
        </script>
    </head>
    <body>
    </body>
</html>

And now the weird stuff:

Sadly I do not own WebsiteA.com and WebsiteB.com, but I managed to have this working between one top level domain and a subdomain (that ends with .no.de). It really does work, BUT in Google Chrome 14's console I get the classic Unsafe JavaScript attempt to access frame with URL http://WebsiteA.com/ from frame with URL http://WebsiteB.com/child.html. Domains, protocols and ports must match.. The example from html5demos works just fine without this error.

Why do I get this error and how do I get rid of it ?

分享到QQ

分享到微博