javascript internet-explorer-11 addeventlistener

window.addEventListener("message" ... not working with IE11

I am opening a popup and this one sent a postMessage to the opener one. I have added a ListenerEvent to the main window for 'message' but this listener is never called in IE 11, it works with firefox.

I already try to wait for the window, or the trick to replace the eventListener by a setInterval but I can't access data of the event in this case. And I have check all the threads that are similar to my question. So I just try a little and simple example to check that addEventListener 'message' is working with IE11 and it does not.

The script in my main html page :

var popup = window.open("popup.html", "Connection", 
                'toolbar=no, location=no, directories=no, menubar=no, status=yes, scrollbars=no, resizable=yes, copyhistory=no, '
                + 'width=' + w + ', height=' + h + ', top=' + y + ', left=' + x);
popup.postMessage("The user is 'bob' and the password is 'secret'",
                  "*");
                  },500);

The script in my popup html page :

function receiveMessage(event)
{
    alert("OK popup");
    console.log("djedjeidjeidjiejdie");
}
window.addEventListener("message", receiveMessage, false);

So for me, the result should be an alert window that is raised when opening the popup. This is the case with firefox but not with IE11. Don't understand why.

Solution

Try to make a test with code below. It is working with IE 11.

Main page code:

<html>
<head>
    <title>Page Title</title>
    <script>
    //create popup window
var domain = 'http://example.com';
var myPopup = window.open(domain + '/HTML/popup_page.html','myWindow');

//periodical message sender
setInterval(function(){
    var message = 'Hello!  The time is: ' + (new Date().getTime());
    console.log('blog.local:  sending message:  ' + message);
    myPopup.postMessage(message,domain); //send the message and target URI
},6000);

//listen to holla back
window.addEventListener('message',function(event) {
    if(event.origin !== 'http://example.com') return;
    console.log('received response:  ',event.data);
},false);
    </script>
</head>
<body>

<h1>Main page</h1>

</body>
</html>

Popup page code:

<!Doctype html>
<html>
<head>
<script>
window.addEventListener('message',function(event) {
    if (event.origin !== 'http://example.com') return;
    alert("OK popup");
    console.log('message received:  ' + event.data,event);
    event.source.postMessage('holla back youngin!',event.origin);
},false);
</script>
</head>
<body>
<h1>popup_page</h1>
</body>
</html>

Output in IE:

Note that you will also get an alert() while you run the code.

Reference:

HTML5’s window.postMessage API