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

You are here: Reference > JavaScript > client-side > event handling > events > onmessage

onmessage event | message event

Browser support:

8	3

Occurs when the postMessage method sends a message to the current window.

Note: The onmessage event is supported in Firefox from version 3 and in Internet Explorer from version 8.

For 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 a message event is fired on the target window.

The event object for a message 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.

How to register:

In HTML:

This event cannot be registered in HTML.

In JavaScript:

object.onmessage = handler;

8	3

object.addEventListener ("message", handler, useCapture);

9	3

object.attachEvent ("onmessage", handler);

8

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

The event object is accessible to all event handlers in all browsers. The properties of the event object contain additional information about the current event. To get further details about these properties and the possible event handler registration methods, please see the page for the event object.

For a complete list of events, see the page for Events in JavaScript.

Basic information:

Bubbles	No
Cancelable	Yes
Event object	MessageEvent

Actions that invoke the message event:

If a message is sent with the postMessage method.

Example HTML code 1:

This example illustrates the use of the message event.

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 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>