如何正确使用postMessage做与html5和现代浏览器的跨域消息传递？我仍然得到错误 [英] How to properly use postMessage to do cross-domain messaging with html5 and modern browsers ? I still get errors
问题描述
我确定这里有错误，但我不能指责它...示例这里在控制台上没有通知或错误，所以这意味着我的浏览器支持跨域消息传递与html5（当然，它是Chrome 14 ..）。
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..).
我的代码做的或多或少以下：在WebsiteA.com中加载的脚本创建了一个iframe并将其附加到WebsiteA.com的文档。附加的框架将包含WebsiteB.com，当它加载时，它必须发送消息给它的父，WebsiteA.com，告诉它WebsiteB.com准备好接收一些JSON。当WebsiteA.com得到这个消息时，它会发回JSON。
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在之前有一行。< / body& / code>就像这样：< script scr =http://WebsiteB.com/load-my-iframe.jstype =text / javascript>脚本> ，并且在 load-my-iframe.js 中有以下内容：
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');
}
}
因此，创建iframe元素，将其附加到WebsiteA .com的文档，并等待它说它准备好了（我猜...）。在WebsiteB.com上，我有一个文件child.html，它是在WebsiteA.com文档中加载的iframe的 src ，该文件包含以下内容：
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>
现在奇怪的东西：
遗憾的是，我没有WebsiteA.com和WebsiteB.com，但我设法使一个顶级域和子域（以.no.de结束）之间工作。它真的工作，但在Google Chrome 14的控制台中，我得到了经典的不安全的JavaScript尝试访问框架与URL http ：//WebsiteA.com/ （从网址 http://WebsiteB.com/child.html 。域，协议和端口必须匹配。。 html5demos 示例工作正常，没有此错误。
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 ?
推荐答案
我刚刚试过你的代码，似乎在Chrome中工作。它使用jsfiddle和jsbin在父窗口和子窗口之间传递消息。
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.
http://jsbin.com/oxesef/4/edit#preview
这篇关于如何正确使用postMessage做与html5和现代浏览器的跨域消息传递？我仍然得到错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
