6

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

Community
  • 1
  • 1
KingBowen
  • 230
  • 3
  • 9
  • Did you make sure your page is running in IE8 Standards Mode (hit F12 and verify in the toolbar)? Did you enable the script debugger, add a breakpoint, and step through your script in the debugger? – EricLaw Aug 12 '13 at 19:44
  • Yes I tested it in IE8,9 and 10. In IE9,10 no error messages, however in IE 8 it shows: SCRIPT16386: No such interface supported for line "myPopup.postMessage(message,domain);". – KingBowen Aug 12 '13 at 23:49
  • I found this link which proved IE can only postMessage to embedded frames, not between windows. http://blogs.msdn.com/b/thebeebs/archive/2011/12/21/postmessage-popups-and-ie.aspx – KingBowen Aug 13 '13 at 00:00
  • Ah, I'd missed you were talking about a different window. :-) I'd actually blogged about this myself years ago: http://blogs.msdn.com/b/ieinternals/archive/2009/09/16/bugs-in-ie8-support-for-html5-postmessage-sessionstorage-and-localstorage.aspx – EricLaw Aug 13 '13 at 05:18
  • Thanks Eric, looks like it is an old issue of IE. The tip of an iceberg of the IE compatibility trap. – KingBowen Aug 14 '13 at 04:50
  • Here's how you can get it working: http://stackoverflow.com/questions/16226924/is-cross-origin-postmessage-broken-in-ie10 – Passer-by Jan 01 '14 at 15:55

1 Answers1

4

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

KingBowen
  • 230
  • 3
  • 9