files/en-us/web/api/messagechannel/index.md
{{APIRef("Channel Messaging API")}} {{AvailableInWorkers}}
The MessageChannel interface of the Channel Messaging API allows us to create a new message channel and send data through it via its two {{domxref("MessagePort")}} properties.
MessageChannel object with two new {{domxref("MessagePort")}} objects.In the following example, you can see a new channel being created using the {{domxref("MessageChannel.MessageChannel", "MessageChannel()")}} constructor.
When the IFrame has loaded, we register an {{domxref("MessagePort/message_event","onmessage")}} handler for {{domxref("MessageChannel.port1")}} and transfer {{domxref("MessageChannel.port2")}} to the IFrame using the {{domxref("window.postMessage")}} method along with a message.
When a message is received back from the IFrame, the onMessage 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 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).
{{Specifications}}
{{Compat}}