internet-explorer - 跨域窗口之间的 postMessage 在 IE10 中不起作用(它适用于框架)

Question

我跟着这个教程http://davidwalsh.name/window-postmessage ，并创建了适用于 Chrome 和 Firefox 但不适用于 IE 10 的跨域消息传递脚本。谁能给我一些关于如何为 IE 8+ 修改它的点击？

在一台服务器上(例如:192.168.15.223)--接收器

<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

Answer 1

IE 不支持跨域弹出窗口(例如:window.open)之间的 postMessage。 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