Javascript 如何正确使用 postMessage 与 html5 和现代浏览器进行跨域消息传递？我仍然收到错误
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7652646/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to properly use postMessage to do cross-domain messaging with html5 and modern browsers ? I still get errors
提问by Jo?o Pinto Jerónimo
I'm sure something is wrong here but I can't quite put a finger on it... The example herebehaves 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..).
我确定这里出了点问题，但我不能完全解决它......这里的例子表现得很好，控制台上没有通知或错误，所以这意味着我的浏览器支持使用 html5 (of当然可以，它是 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.
我的代码或多或少执行以下操作： 在 WebsiteA.com 中加载的脚本创建了一个 iframe 并将其附加到 WebsiteA.com 的文档中。附加的框架将包含 WebsiteB.com，当它被加载时，它必须向它的父级 WebsiteA.com 发送一条消息，告诉它 WebsiteB.com 已准备好接收一些 JSON。当 WebsiteA.com 收到此消息时，它会发回 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:
所以 WebsiteA.com 之前有一行</body>就像这样：<script scr="http://WebsiteB.com/load-my-iframe.js" type="text/javascript"></script>，在里面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');
}
}
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 srcof the iframe loaded in WebsiteA.com's document, and that file has the following:
这样就创建了 iframe 元素，将它附加到 WebsiteA.com 的文档并等待它说它准备好了（我猜......）。在 WebsiteB.com 上，我src在 WebsiteA.com 的文档中加载了 iframe的文件 child.html，该文件具有以下内容：
<!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 html5demosworks just fine without this error.
遗憾的是，我不拥有 WebsiteA.com 和 WebsiteB.com，但我设法在一个顶级域和一个子域（以 .no.de 结尾）之间运行。它确实有效，但在 Google Chrome 14 的控制台中，我得到了经典的. 来自 html5demos的示例工作正常，没有此错误。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.
Why do I get this error and how do I get rid of it ?
为什么会出现此错误以及如何摆脱它？
采纳答案by Paul Grime
I've just tried your code and this seems to work in Chrome. It uses jsfiddle and jsbin to pass messages between parent and child windows.
我刚刚试过你的代码，这似乎在 Chrome 中工作。它使用 jsfiddle 和 jsbin 在父窗口和子窗口之间传递消息。
回答by Malartre
This is not the answer but could help you.
这不是答案，但可以帮助您。
I use http://easyxdm.net/wp/to avoid that kind of problems.
我使用http://easyxdm.net/wp/来避免这类问题。
Carl
卡尔
![Javascript “getElementsByTagName(...)[0]”未定义？](/res/img/loading.gif)