MessagePort

The MessagePort interface of the Channel Messaging API represents one of the two ports of a MessageChannel, allowing messages to be sent from one port and listening out for them arriving at the other.

Methods

Inherits methods from its parent, EventTarget

MessagePort.postMessage

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

MessagePort.start

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

MessagePort.close

Disconnects the port, so it is no longer active.

Event handlers

Inherits event handlers from its parent, EventTarget

MessagePort.onmessage

An EventListener called when a MessageEvent of type message is fired on the port—that is, when the port receives a message.

MessagePort.onmessageerror

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

Example

In the following code block, you can see a new channel being created using the MessageChannel.MessageChannel constructor. When the IFrame has loaded, we transfer MessageChannel.port2 (a MessagePort) to the IFrame using MessagePort.postMessage along with a message. The handleMessage handler then responds to a message being sent back from the IFrame (using MessagePort.onmessage), putting it into a paragraph.

var channel = new MessageChannel();
var para = document.querySelector('p');
    
var ifr = document.querySelector('iframe');
var otherWindow = ifr.contentWindow;

ifr.addEventListener("load", iframeLoaded, false);
    
function iframeLoaded() {
  otherWindow.postMessage('Hello from the main page!', '*', [channel.port2]);
}

channel.port1.onmessage = handleMessage;
function handleMessage(e) {
  para.innerHTML = e.data;
}   

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

Specifications

Browser compatibility

See also

• Using channel messaging