6

我遵循本教程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。

任何帮助将不胜感激！

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

  1. 这篇文章建议在 IE 上使用 attachEvent，我已经在上面的代码中这样做了： addEventListener in Internet Explorer

  2. 这个微软官方文档显示 IE 8+ 应该支持 addEventListener： http: //msdn.microsoft.com/en-us/library/ie/cc197057 (v=vs.85).aspx

  3. 这里推荐使用 Jquery bind() 来替换 addEventListener： jQuery 等价于 JavaScript 的 addEventListener 方法

4

1 回答 1

4

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

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

在 Jquery UI 对话框的帮助下

<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>

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

  1. 使用 Ajax 的跨域资源共享 (CORS)。

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

于 2013-08-14T05:27:34.693 回答