MessageChannel

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨September 2015⁩.

Note: This feature is available inWeb Workers.

TheMessageChannel interface of theChannel Messaging API allows us to create a new message channel and send data through it via its twoMessagePort properties.

Constructor

MessageChannel(): Returns a newMessageChannel object with two newMessagePort objects.

Instance properties

MessageChannel.port1Read only: Returns port1 of the channel.
MessageChannel.port2Read only: Returns port2 of the channel.

Example

In the following example, you can see a new channel being created using theMessageChannel() constructor.

When the IFrame has loaded, we register anonmessage handler forMessageChannel.port1 and transferMessageChannel.port2 to the IFrame using thewindow.postMessage method along with a message.

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

const channel = new MessageChannel();const output = document.querySelector(".output");const iframe = document.querySelector("iframe");// Wait for the iframe to loadiframe.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 port1function onMessage(e) {  output.innerHTML = e.data;}

For a full working example, see ourchannel messaging basic demo on GitHub (run it live too).