I'm trying to set up a simple postmessage munication between a parent window and an iframe contained inside it. I got this code on the parent side:

var ifr = document.getElementById("ifr");

ifr.contentWindow.postMessage('hello child, this is parent', '*');

window.addEventListener('message', function (e) { console.log(e.data) });

And on the child side I have:

window.parent.postMessage('hello parent, this is child', '*')

window.addEventListener('message', function (e) {console.log(e.data) } );

I receive the message sent by the iframe but not the one sent by the parent, I've checked and the iframe element is being correctly selected by the get. This is just for testing purposes to use on something else.

I'm trying to set up a simple postmessage munication between a parent window and an iframe contained inside it. I got this code on the parent side:

var ifr = document.getElementById("ifr");

ifr.contentWindow.postMessage('hello child, this is parent', '*');

window.addEventListener('message', function (e) { console.log(e.data) });

And on the child side I have:

window.parent.postMessage('hello parent, this is child', '*')

window.addEventListener('message', function (e) {console.log(e.data) } );

I receive the message sent by the iframe but not the one sent by the parent, I've checked and the iframe element is being correctly selected by the get. This is just for testing purposes to use on something else.

• javascript
• iframe

• Set name to iframe and send message to iframe using window.frames[<index/name>] – Murali Mopuru Commented Nov 23, 2013 at 16:42

1 Answer 1

When you send message to iframe, it is not loaded yet. Use "onload" event to start munication with iframe.

ifr.onload = function() { 
    this.contentWindow.postMessage('hello child, this is parent', '*');
};