跨域窗口之间的 postMessage 在 IE10 中不起作用（它适用于框架）答案

【问题标题】：postMessage between cross-domain windows not working in IE10 (it works for frames)跨域窗口之间的 postMessage 在 IE10 中不起作用（它适用于框架）
【发布时间】：2013-08-13 18:33:37
【问题描述】：

我遵循本教程http://davidwalsh.name/window-postmessage，并创建了适用于 Chrome 和 Firefox 但不适用于 IE 10 的跨域消息传递脚本。谁能告诉我如何针对 IE 8+ 修改它？

在一台服务器上（例如：192.168.15.223）--receiver

<script>
//listener
window.addEventListener('message',function(event) {
    if(event.origin !== 'http://120.0.0.211') return;
    document.getElementById('cc').innerHTML = event.data;
},false);

window.attachEvent('onmessage',function(event) {
    if(event.origin !== 'http://120.0.0.211') return;
    document.getElementById('cc').innerHTML = event.data;
},false);
</script>
<p>At 192.18.15.223 server</p>
<div id='cc'>Nothing received yet</div>

在另一个服务器（例如：120.0.0.211）--sender

<script>
//create popup window
var domain = 'http://192.18.15.223';
var myPopup = window.open(domain + '/receiver','myWindow','width=400,height=200');
//message sender
function popup(){
    var message = 'A message sent from 120.0.0.211:';
    myPopup.postMessage(message,domain); //send the message and target URI 
}
</script>
<div id="bb">At 120.0.0.211 server</div>
<button type="button" onclick="popup()">send the message!</button>

以上脚本在 Chrome 和 Firefox 中完美运行，弹出窗口并且可以接收消息，但是在 IE(8+) 中它只弹出窗口但没有接收到消息（或者可能无法发送）。

我的主要目的是让两个域发送和接收简单的数据（文本、单张照片等），并且不包括后端的太多更改。所以不考虑webservice。

任何帮助将不胜感激！

这里有一些可能有助于调查问题的链接。

这篇文章建议在 IE 上使用 attachEvent，我已经在上面的代码中这样做了： addEventListener in Internet Explorer
这个微软官方文档显示 IE 8+ 应该支持 addEventListener： http://msdn.microsoft.com/en-us/library/ie/cc197057(v=vs.85).aspx
这里推荐使用 Jquery bind() 替换 addEventListener： jQuery equivalent of JavaScript's addEventListener method

【问题讨论】：

您是否确保您的页面在 IE8 标准模式下运行（按 F12 并在工具栏中验证）？您是否启用了脚本调试器、添加断点并在调试器中单步执行您的脚本？
是的，我在 IE8,9 和 10 中对其进行了测试。在 IE9,10 中没有错误消息，但是在 IE 8 中显示： SCRIPT16386: No such interface supported for line "myPopup.postMessage(message,domain );"。
我发现这个链接证明 IE 只能 postMessage 到嵌入的框架，而不是窗口之间。 blogs.msdn.com/b/thebeebs/archive/2011/12/21/…
啊，我错过了你在谈论不同的窗口。 :-) 实际上，我自己在几年前就在博客上写过这个：blogs.msdn.com/b/ieinternals/archive/2009/09/16/…
谢谢 Eric，看来这是 IE 的老问题了。 IE 兼容性陷阱的冰山一角。

标签： internet-explorer cross-domain addeventlistener postmessage

【解决方案1】：

IE 不支持跨域弹出窗口之间的 postMessage（例如：window.open）。 IE 确实支持嵌入框架的 postMessage（例如：top.frames）。

所以我最终将一个框架放入对话框中，假装像一个弹出窗口。例如：

With the help of Jquery UI dialog

<script>
$("#dialog").dialog({
    autoOpen: false,
    modal: true,
    height: 300,
weight: 400,
});

function openiframe(){
   $('#dialog').dialog('open');
});
</script>

<p>At 120.0.0.211 server</p>
<button type="button" onclick="openiframe()">send the message!</button>
<div id="dialog">
   <iframe id="iframe" src="http://192.168.15.223/smallframe"></iframe>
</div>

可能还有其他解决方案/技术用于跨域窗口之间的交换：

Cross-Origin Resource Sharing (CORS) using Ajax。
使用像 REST 这样的 Web 服务，这实际上是服务器到服务器的交换，而不是服务器-浏览器-服务器结构。但这是我们可以将一些消息发送到另一台服务器的一种方式。对于某些框架，很容易设置 REST，例如： cakephp

【讨论】：