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.

See full compatibility

Note: This feature is available in Web Workers.

The message event is fired on a MessagePort object when a message arrives on that channel.

This event is not cancellable and does not bubble.

Syntax

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

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

onmessage = (event) => { }

Event type

A MessageEvent. Inherits from Event.

Event properties

This interface also inherits properties from its parent, Event.

MessageEvent.data Read only: The data sent by the message emitter.
MessageEvent.origin Read only: A string representing the origin of the message emitter.
MessageEvent.lastEventId Read only: A string representing a unique ID for the event.
MessageEvent.source Read only: A MessageEventSource (which can be a WindowProxy, MessagePort, or ServiceWorker object) representing the message emitter.
MessageEvent.ports Read only: An array containing all MessagePort objects sent with the message, in order.

Examples

Suppose a script creates a MessageChannel 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 call MessagePort.start() before any messages will be delivered to this port. This is only needed when using the addEventListener() method: if the receiver uses onmessage 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);
  };
});

Specifications

Specification
HTML # event-message
HTML # handler-messageport-onmessage

Browser compatibility

	desktop					mobile							server
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Internet	WebView Android	WebView on iOS	Bun	Deno	Node.js
`message` event	Chrome – Full support Chrome 2 (Release date: 2009-05-21) footnote Full support	Edge – Full support Edge 12 (Release date: 2015-07-29) footnote Full support	Firefox – Full support Firefox 41 (Release date: 2015-09-22) footnote Full support	Opera – Full support Opera 10.6 (Release date: 2010-07-01) footnote Full support	Safari – Full support Safari 5 (Release date: 2010-06-07) footnote Full support	Chrome Android – Full support Chrome Android 18 (Release date: 2012-06-27) footnote Full support	Firefox for Android – Full support Firefox for Android 41 (Release date: 2015-09-22) footnote Full support	Opera Android – Full support Opera Android 11.5 (Release date: 2011-10-12) footnote Full support	Safari on iOS – Full support Safari on iOS 4.2 (Release date: 2010-11-22) footnote Full support	Samsung Internet – Full support Samsung Internet 1 (Release date: 2013-04-27) footnote Full support	WebView Android – Full support WebView Android 4.4 (Release date: 2013-12-09) footnote Full support	WebView on iOS – Full support WebView on iOS 4.2 (Release date: 2010-11-22) footnote Full support	Bun – Full support Bun 1 (Release date: 2023-09-08) footnote Full support	Deno – Full support Deno 1.12 (Release date: 2021-07-13) footnote Full support	Node.js – Partial support Node.js 11.7 – 14.6 (Release date: 2019-01-18) footnote Partial support footnote Supports the event, but only via Node `EventEmitter`. Node.js – Full support Node.js 14.7 (Release date: 2020-07-29) footnote Full support

Tip: you can click/tap on a cell for more information.

Full support: Full support
Partial support: Partial support
: Has more compatibility info.