In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > event handling > methods > postMessage (window)

postMessage method (window)

Browser support:

8	3	9.5

Provides communication between two documents regardless of their location.

Note: The postMessage method is supported in Internet Explorer from version 8, Firefox from version 3 and Opera from version 9.5.

Because of security restrictions, the contents of a document cannot be accessed from another document in JavaScript if the two documents are located in different domains. If you need to communicate between two documents regardless of their location, invoke the postMessage method on the window object that contains the target document. When the postMessage method is invoked, then an onmessage event will be fired on the target window.

Note: The postMessage method is synchronous in Internet Explorer and asynchronous in other browsers.

The event object that belongs to the onmessage event supports the following additional properties:

the data property contains the message,
the origin property retrieves the scheme, hostname and port of the document that invoked the postMessage method,
the source property refers to the window object that contains the document that invoked the postMessage method.
the lastEventId property returns the identifier of the last message.

Note: The origin property is supported in Opera from version 10. In earlier versions, it supports the uri and domain properties instead. In Opera 10, the support for the uri and domain properties has been removed.

See the example for further details.

Syntax:

object.postMessage (message, targetOrigin);

You can find the related objects in the Supported by objects section below.

Parameters:

message

Required. String that specifies the message.

targetOrigin

Required in Firefox, Google Chrome and Safari, optional in Internet Explorer and Opera. String that specifies the URI (scheme, hostname and port) of the target document's location.

Before the message is dispatched, the current location of the target document is checked. If it does not match the specified URI, then the message will not be dispatched. This parameter can be useful if you want to be sure of the location of the target document before dispatching the message (for example secret data needs to be sent).

If you do not need this feature, use the '*' string literal.

Opera does not support this parameter.

Return value:

This method has no return value.

Example HTML code 1:

This example illustrates the use of the postMessage method:

Code

message.htm

<head>
    <script type="text/javascript">
        function Init () {
            if (window.addEventListener) {  // all browsers except IE before version 9
                window.addEventListener ("message", OnMessage, false);
            }
            else {
                if (window.attachEvent) {   // IE before version 9
                    window.attachEvent("onmessage", OnMessage);
                }
            }
        }

        function GetState () {
            var frame = document.getElementById ("myFrame");
                // send the 'getstate' message to the frame window
            var message = "getstate";
            if (frame.contentWindow.postMessage) {
                frame.contentWindow.postMessage (message, "*");
            }
            else {
                alert ("Your browser does not support the postMessage method!");
            }
        }

        function OnMessage (event) {
            var message = event.data;
            var arr = message.split (",");
            if (arr[0] == "true") {
                alert ("The check box is checked.");
            }
            else {
                alert ("The check box is not checked.");
            }

            var selIndex = Number (arr[1]);
            alert ("The " + (selIndex + 1) + ". option is selected.");
        }
    </script>
</head>
<body onload="Init ();">
    <iframe id="myFrame" src="message.htm" width="500" height="200px"></iframe>
    <br /><br />
    <button onclick="GetState ()">Get the state of the controls in the frame</button>
</body>

<!DOCTYPE html>
<html>
<head>
    <title>Message handling example</title>
    <meta charset="utf-8" />
    <script type="text/javascript">
        function Init () {
            if (window.addEventListener) {  // all browsers except IE before version 9
                window.addEventListener ("message", OnMessage, false);
            }
            else {
                if (window.attachEvent) {   // IE before version 9
                    window.attachEvent("onmessage", OnMessage);     // Internet Explorer from version 8
                }
            }
        }

        function OnMessage (event) {
                // Check the location of the caller
            
                // Opera earlier than version 10
            if ('domain' in event) {
                if (event.domain != "help.dottoro.com") {
                    return;
                }
            }
                // Firefox, Safari, Google Chrome, Internet Explorer from version 8 and Opera from version 10
            if ('origin' in event) {
                if (event.origin != "http://help.dottoro.com") {
                    return;
                }
            }
            
            DumpMessageInfo (event);
            
            if (event.data == "getstate") {
                    // create the message
                var checkBox = document.getElementById ("myCheck");
                var select = document.getElementById ("mySelect");
                var message = checkBox.checked + "," + select.selectedIndex;
                
                    // send back the response message
                event.source.postMessage (message, event.origin);
            }
        }
        
        function DumpMessageInfo (event) {
            var info =  document.getElementById ("info");
            info.innerHTML = "message: " + event.data;
                // Opera earlier than version 10
            if ('domain' in event) {
                info.innerHTML += "<br />domain: " + event.domain;
            }
                // Opera earlier than version 10
            if ('uri' in event) {
                info.innerHTML += "<br />url: " + event.uri;
            }
                // Firefox, Safari, Google Chrome, Internet Explorer from version 8 and Opera from version 10
            if ('origin' in event) {
                info.innerHTML += "<br />origin: " + event.origin;
            }
                // Firefox, Safari and Google Chrome
            if ('lastEventId' in event) {
                info.innerHTML += "<br />lastEventId: " + event.lastEventId;
            }
        }

    </script>
<body onload="Init ();" style=background-color:#e0b0a0;>
    <input type="checkbox" id="myCheck" />Sample check box<br />
    <select id="mySelect">
        <option>First option</option>
        <option>Second option</option>
        <option>Third option</option>
    </select>
    <br /><br />
    Information about the message:
    <div id="info" style="background-color:#f0f0b0;"></div>
</body>
</html>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Supported by objects:

window

onmessage
data
origin
source

External links:

postMessage (MSDN)
postMessage (Mozilla Developer Center)

Digg Del.icio.us Reddit Facebook Twitter Diigo

User Contributed Comments

Victor

window.postMessage is syncronouse in IE 8

postMessage is syncronouse in IE 8
example:

1.
2.
3.
4.
5.
6.
7.
8.


var syncronouse = true;
window.onmessage = function () {
  alert(syncronouse);// alerts "true"
};
window.postMessage('test', '*');
syncronouse = false;