MessagePort: message event

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.

Themessage event is fired on aMessagePort object when a message arrives on that channel.

This event is not cancellable and does not bubble.

Syntax

Use the event name in methods likeaddEventListener(), or set an event handler property.

addEventListener("message", (event) => { })onmessage = (event) => { }

Event properties

This interface also inherits properties from its parent,Event.

MessageEvent.dataRead only: The data sent by the message emitter.
MessageEvent.originRead only: A string representing the origin of the message emitter.
MessageEvent.lastEventIdRead only: A string representing a unique ID for the event.
MessageEvent.sourceRead only: AMessageEventSource (which can be aWindowProxy,MessagePort, orServiceWorker object) representing the message emitter.
MessageEvent.portsRead only: An array containing allMessagePort objects sent with the message, in order.

Examples

Suppose a script creates aMessageChannel and sends one of the ports to a different browsing context, such as another<iframe>, using code like this:

const channel = new MessageChannel();const myPort = channel.port1;const targetFrame = window.top.frames[1];const targetOrigin = "https://example.org";const messageControl = document.querySelector("#message");const channelMessageButton = document.querySelector("#channel-message");channelMessageButton.addEventListener("click", () => {  myPort.postMessage(messageControl.value);});targetFrame.postMessage("init", targetOrigin, [channel.port2]);

The target can receive the port and start listening for messages and message errors on it using code like this:

window.addEventListener("message", (event) => {  const myPort = event.ports[0];  myPort.addEventListener("message", (event) => {    received.textContent = event.data;  });  myPort.addEventListener("messageerror", (event) => {    console.error(event.data);  });  myPort.start();});

Note that the listener must callMessagePort.start() before any messages will be delivered to this port. This is only needed when using theaddEventListener() method: if the receiver usesonmessage instead,start() is called implicitly:

window.addEventListener("message", (event) => {  const myPort = event.ports[0];  myPort.onmessage = (event) => {    received.textContent = event.data;  };  myPort.onmessageerror = (event) => {    console.error(event.data);  };});