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） - 发件人

<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+）中它只会弹出窗口但是没有收到消息（或者可能无法发送）。

我的主要目的是让两个域发送和接收简单数据（文本，单张照片等），并且后端不包含太多变化。所以不考虑web服务。

任何帮助都将不胜感激！

以下是一些可能有助于调查问题的链接。

这篇文章使用了IE上的attachEvent，我在上面的代码中已经做过了： addEventListener in Internet Explorer
这个microsoft官方文档显示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不支持跨域弹出窗口之间的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服务，实际上是服务器到服务器的交换，而不再是服务器 - broswer-server结构。但这是我们如何将一些消息发送到另一台服务器的方式。对于某些框架，很容易设置REST，例如：cakephp

在IE10中不能使用的跨域窗口之间的postMessage（适用于帧）

1 个答案: