好像是window.postMessage的重点是允许在不同域上托管的窗口/框架之间进行安全通信,但在 Chrome 中它实际上似乎允许。
场景如下:
- 在域 A 的页面中嵌入一个 <iframe>(在域 B 上有一个
src
*) - <iframe> 最终主要是一个 <script> 标记,在执行结束时...
- 我调用 window.postMessage( some_data, page_on_A )
<iframe> 绝对是在域 B 的上下文中,我已经确认 <iframe> 中的嵌入式 javascript 正确执行并使用正确的值调用 postMessage
。
我在 Chrome 中收到此错误消息:
Unable to post message to A. Recipient has origin B.
下面是在A上的页面中注册一个消息事件监听器的代码:
window.addEventListener(
"message",
function (event) {
// Do something
},
false);
我也试过调用 window.postMessage(some_data, '*')
,但所做的只是抑制错误。
我只是错过了这里的重点,window.postMessage(...) 不是这个意思吗?还是我只是做错了?
*Mime 类型的文本/html,它必须保留。
最佳答案
这是一个适用于 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.example
来自 another question ,看起来域(这里是 A 和 B)必须有一个 /
才能使 postMessage
正常工作。
关于javascript - 如何跨域使用window.postMessage?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3457391/