postMessage in JavaScript

The big problem with iframes is communication between the iframe and it's parent. When the origin of an iframe is the same as parent there's no problem. But when the domains are different it was impossible to change anything in iframe from parent for instance. postMessage solve this problem almost completely.

Two ways communication with postMessage

The cool part is that postMessage works almost on every browser including IE8. Let's start playing around with postMessage then.

Sending data with postMessage

Let us take a look on the snippet below

var iframe = document.getElementById('iframe').contentWindow;
iframe.postMessage('Hello iframe!', 'http://iframe.domain.com');

Yes, that's it:) In first line we are getting contentWindow of iframe with id="iframe". Let's assume that domain of page inside the iframe is http://iframe.domain.com

In second line we will send the message to this iframe via postMessage function. It takes 2 parameters. First one is data that we want to send to iframe. Basically it can be any kind of object, json, etc. but the safest way is to use String type. It is supported by all major browsers.

Second parameter is target domain. It should be the iframe URL. You can also put * to target any domain. But from security reasons and targeting only particular iframe with given domain I suggest to put the URL address:)

Receiving data with postMessage

Receiving data will take little more than 2 lines, but is as easy as sending. Take a look on example below:

var messageListener = function(event){
    //Optional check
    if(event.origin !== 'http://domain.com'){
        return;
    }

    //Do whatever You want to do with recieved data
    console.log(event.data);

    //Respond
    event.source.postMessage('Message recieved, thanks!', event.origin);
}

if(window.addEventListener){
    addEventListener('message', messageListener, false);
}else{
    attachEvent('onmessage', messageListener);
}

First of all we should write short function that will handle our message. It should take parameter that will have received message.

With event will come 3 basic properties that are important to postMessage

• origin - contain domain from where message was posted
• data - posted message
• source - reference to sender window

First of all we can check if message should be accepted. It's optional check. Usually I don't care where from message was posted. But if we want to check, origin will help us.

In event.data we will have our posted data. Now world is Yours and You can do whatever You want to do with that:)

Quiet often we want to respond to the message, for instance send confirmation message or some status. We will use event.source.postMessage() function. As target domain pass event.origin, to send request to sender window.

But do not forget that You have to write another receiving function in parent window, that will handle onMessage request!

Last part is to bind our function using eventListener, or in older browser using attachEvent function.