HTML5 Messaging

The HTML5 Messaging API enables HTML5 pages to send messages to each other, even if the pages are not loaded from the same domain (e.g. www.jenkov.com and www.scriptdraw.com).

Sending Messages

In order to send messages from one page to another, the page sending the message must have a reference to the window of the other page. The sending page then calls the postMessage() function on the window object of the receiving page.

Here is an example of a page sending a message to another page displayed in an iframe:

var message = "Hello there";
var origin  = "http://tutorials.jenkov.com";

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

theIframe.contentWindow.postMessage(message, origin);

You can run the code above by pressing this button:

The value of the origin parameter passed to the postMessage() function must match the domain from which the page in the iframe was loaded. If the origins do not match, this will not work. You do not need the full address of the page as origin. The domain is enough, for instance http://localhost or http://tutorials.jenkov.com

Receiving Messages

To listen for messages a page needs to set the onmessage event handler function on its own window object. Here is an example that works in Firefox and Chrome:

window.onmessage = function(event) {
    document.getElementById("show").innerHTML =
            "Message Received: " + event.data
          + " from: " + event.origin;
}

This example sets the onmessage function on the window object. Inside the function the code selects the HTML element with the id show, and sets the inner HTML of that element to "Message Received: ", plus the message received. This event handler is actually the one used in the page displayed in the iframe in the example under "Sending Messages".

In Internet Explorer 9 you have to use this code to listen for the onmessage event:

window.onmessage = function(event) {
    document.getElementById("show").innerHTML =
            "Message Received: " + event.data
          + " from: " + event.origin;
}

You can just keep both of these event listener code blocks in your page. They should not conflict with each other.

The event object received contains the following properties:

data
origin
source

The data property contains the message sent from the sending page.

The origin property contains the origin (domain) of the page that sent the message.

The source property contains a reference to the window object of the sending page. This window object reference can be used to send messages back to the sender page, using the postMessage() function. Here is an example:

window.onmessage = function(event) {
    event.source.postMessage(
       "Thank you for the message",
       event.origin
    );
}

Sending JSON

The messaging API only allows you to send string messages. If you need to send a JavaScript object, you will need to turn it into a JSON string using JSON.stringify(), and parse it again using JSON.parse(). Here is an example:

var theObject = { property1 : "hello", property2 : "world" }
var message = JSON.stringify(theObject);
var origin  = "http://tutorials.jenkov.com";

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

theIframe.contentWindow.postMessage(message, origin);

And here is how the JSON string is parsed into a JavaScript object:

window.onmessage = function(event) {
    var theObject = JSON.parse(event.data);
}