MessagePort

Inherits methods from its parent, EventTarget

postMessage()

Sends a message from the port, and optionally, transfers ownership of objects to other browsing contexts.

start() (en-US)

Starts the sending of messages queued on the port (only needed when using EventTarget.addEventListener; it is implied when using MessagePort.onmessage (en-US).)

close() (en-US)

Disconnects the port, so it is no longer active.

Inherits event handlers from its parent, EventTarget

onmessage (en-US)

An EventListener called when MessageEvent (en-US) of type message is fired on the port—that is, when the port receives a message.

onmessageerror (en-US)

An EventListener called when a MessageEvent (en-US) of type MessageError is fired—that is, when it receives a message that cannot be deserialized.

message (en-US)

Fired when a MessagePort object receives a message. Also available via the onmessage (en-US) property.

messageerror (en-US)

Fired when a MessagePort object receives a message that can't be deserialized. Also available via the onmessageerror (en-US) property.

In the following example, you can see a new channel being created using the MessageChannel() (en-US) constructor.

When the IFrame has loaded, we register an onmessage (en-US) handler for MessageChannel.port1 (en-US) and transfer MessageChannel.port2 (en-US) to the IFrame using the window.postMessage (en-US) method along with a message.

When a message is received back from the IFrame, the onMessage function simply outputs the message to a paragraph.

var channel = new MessageChannel();
var output = document.querySelector('.output');
var iframe = document.querySelector('iframe');

// Wait for the iframe to load
iframe.addEventListener("load", onLoad);

function onLoad() {
  // Listen for messages on port1
  channel.port1.onmessage = onMessage;

  // Transfer port2 to the iframe
  iframe.contentWindow.postMessage('Hello from the main page!', '*', [channel.port2]);
}


// Handle messages received on port1
function onMessage(e) {
  output.innerHTML = e.data;
}

For a full working example, see our channel messaging basic demo on Github (run it live too).

• Using channel messaging (en-US)