message | onmessage event

Fires when the user sends a cross-document message or a message is sent from a Worker with postMessage.

HTML5 Web Messaging, Section 5.3Internet Explorer 8

 

Syntax

HTML Attribute <element onmessage = "handler(event)">
Event Property object.onmessage = handler;
attachEvent Method object.attachEvent("onmessage", handler)
addEventListener Method object.addEventListener("message", handler, useCapture)

 

Event information

SynchronousNo
BubblesNo
CancelableYes

 

Event handler parameters

pEvtObj [in]

Type: IHTMLEventObj

Standards information

Remarks

For info on channel messaging with Workers, see MessagePort and MessageChannel.

The onmessage event is fired when script invokes postMessage on a window object to send the target document a message. The data property of the incoming event is set to the value passed in postMessage.

Security Warning:  For best results, check the origin attribute to ensure that messages are only accepted from domains that you expect. For more information, see Section 7.4.2 of the HTML5 (Working Draft) specification from the World Wide Web Consortium (W3C).

To invoke this event, do one of the following:

The pEvtObj parameter is required for the following interfaces:

Examples

For example, if document A contains a reference to the contentWindow of document B, script in document A can send document B a message by calling postMessage as follows:

JavaScript
Copy 

var o = document.getElementsByTagName('iframe')[0];
o.contentWindow.postMessage('Hello World');

The script in document B can respond to the message by registering the onmessage event handler for incoming messages.

JavaScript
Copy 

if (window.addEventListener) {
  window.addEventListener('message', function (e) {
    if (e.domain == 'example.com') {
      if (e.data == 'Hello World') {
        e.source.postMessage('Hello');
      } else {
        console.log(e.data);
      }
    }
  });
}
else { // IE8 or earlier
  window.attachEvent('onmessage', function (e) {
    if (e.domain == 'example.com') {
      if (e.data == 'Hello World') {
        e.source.postMessage('Hello');
      } else {
        alert(e.data);
      }
    }
  });
}

 

 

Show: