Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

postMessage between cross-domain windows not working in IE10 (it works for frames)

I followed this tutorial http://davidwalsh.name/window-postmessage, and created cross domain messaging scripts which works in Chrome and Firefox but not in IE 10. Could anyone give me some hits on how to modify it for IE 8+?

At one server(eg: 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>

At another server(eg: 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>

Above scripts work perfectly in Chrome and Firefox, window pops up and message can be received, however in IE(8+)it only pops the window but message is not received(or may be can't send).

My main purpose is making two domains send and receive simple data (texts, single photo etc), and not including too much change on the backend. So webservice is not considered.

Any help will be appreciate!

Here is some links that might be helpful to investigate the problems.

  1. This post suggess using attachEvent on IE, which I already did in the codes above: addEventListener in Internet Explorer

  2. This microsoft officially document shows IE 8+ should support addEventListener: http://msdn.microsoft.com/en-us/library/ie/cc197057(v=vs.85).aspx

  3. This recommend using Jquery bind() to replace addEventListener: jQuery equivalent of JavaScript's addEventListener method

like image 613
KingBowen Avatar asked Aug 12 '13 12:08

KingBowen


1 Answers

IE does not support postMessage between cross-domain popup windows(eg:window.open). IE does support postMessage for embedded frames(eg:top.frames).

So I end up by putting a frame into a dialog, pretending like a popup windows. eg:

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>

It might be other solutions/technologies out there for commutation between cross-domain windows:

  1. Cross-Origin Resource Sharing (CORS) using Ajax.

  2. Using Webservice like REST, which actually is a server-to-server commutation, not a server-broswer-server struct anymore. But it is a way how we can send some message to another server. For some frameworks it is easy to setup REST eg: cakephp

like image 170
KingBowen Avatar answered Oct 06 '22 13:10

KingBowen