如何跨域使用window.postMessage？
如何跨域使用window.postMessage？
提问于 2018-04-03 04:24:00
看起来window.postMessage的要点是允许在不同域上托管的窗口/框架之间进行安全通信，但实际上Chrome 并没有允许这样做。
以下是该场景：
- 在域A的页面中嵌入<iframe>（带有
src域B *） - <iframe>最终是一个<script>标签，在其结束时执行...
- 我打电话给window.postMessage（some_data，page_on_A）
<iframe>绝对是在域B的上下文中，并且我已经确认该<iframe>中的嵌入式JavaScript可以正确执行并postMessage以正确的值调用。
我在Chrome中收到此错误消息：
Unable to post message toA. Recipient has originB.
以下是在A上的页面中注册消息事件侦听器的代码：
window.addEventListener(
"message",
function (event) {
// Do something
},
false);
我也尝试过调用window.postMessage(some_data, '*')，但所有这些都会抑制错误。
我只是在这里忽略了一点，是window.postMessage（...）不是为了这个吗？或者我只是在做可怕的错误？
* Mime类型的文本/ HTML，它必须保留。
回答 2
Stack Overflow用户
发布于 2018-04-03 12:32:22
这是一个适用于Chrome 5.0.375.125的示例。
页面B（iframe内容）：
<html>
<head></head>
<body>
<script>
top.postMessage('hello', 'A');
</script>
</body>
</html>
请注意使用top.postMessage或parent.postMessage不在window.postMessage这里
页面A：
<html>
<head></head>
<body>
<iframe src="B"></iframe>
<script>
window.addEventListener( "message",
function (e) {
if(e.origin !== 'B'){ return; }
alert(e.data);
},
false);
</script>
</body>
</html>
A和B必须是类似的东西 http://domain.com
Stack Overflow用户
发布于 2018-04-03 14:08:54
加载后，应该将消息从框架发布到父级。
框架脚本：
$(document).ready(function() {
window.parent.postMessage("I'm loaded", "*");
});
并在父级中倾听：
function listenMessage(msg) {
alert(msg);
}
if (window.addEventListener) {
window.addEventListener("message", listenMessage, false);
} else {
window.attachEvent("onmessage", listenMessage);
}
使用此链接获取更多信息：http：//en.wikipedia.org/wiki/Web_Messaging
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/-100007935
复制相关文章
相似问题