MessageChannel: MessageChannel() constructor
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 in Web Workers.
The MessageChannel()
constructor of the MessageChannel
interface returns a new MessageChannel
object with two new
MessagePort
objects.
Syntax
new MessageChannel()
Parameters
None (undefined
).
Return value
A new MessageChannel
object.
Examples
In the following code block, you can see a new channel being created using the
MessageChannel()
constructor.
When the <iframe>
has loaded,
we pass port2
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 onmessage
), putting it into a paragraph.
The port1
is listened to, to check when the message arrives.
const channel = new MessageChannel();
const para = document.querySelector("p");
const ifr = document.querySelector("iframe");
const 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
Specification |
---|
HTML Standard # dom-messagechannel-dev |
Browser compatibility
BCD tables only load in the browser