MessagePort: message event

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

Bubbles No
Cancelable No
Interface MessageEvent
Event handler property onmessage


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 =[1];
const targetOrigin = '';

const messageControl = document.querySelector('#message');
const channelMessageButton = document.querySelector('#channel-message');

channelMessageButton.addEventListener('click', () => {

targetFrame.postMessage('init', targetOrigin, [channel.port2]);

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

window.addEventListener('message', (event) => {
    const myPort = event.ports[0];

    myPort.addEventListener('message', (event) => {
        received.textContent =;


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 =;


HTML Standard (HTML)
# event-message

Browser compatibility

BCD tables only load in the browser

See also