BroadcastChannel: message event

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

Bubbles	No
Cancelable	No
Interface	`MessageEvent`
Event handler property	`onmessage`

In this example there's a "sender" <iframe> that broadcasts the contents of a <textarea> when the user clicks a button. There are two "receiver" iframes that listen to the broadcast message and write the result into a <div> element.

Sender

const channel = new BroadcastChannel('example-channel');
const messageControl = document.querySelector('#message');
const broadcastMessageButton = document.querySelector('#broadcast-message');

broadcastMessageButton.addEventListener('click', () => {
    channel.postMessage(messageControl.value);
})

Receiver 1

const channel = new BroadcastChannel('example-channel');
channel.addEventListener('message', (event) => {
  received.textContent = event.data;
});

Receiver 2

const channel = new BroadcastChannel('example-channel');
channel.addEventListener('message', (event) => {
  received.textContent = event.data;
});

Result

Specifications

Specification
HTML Standard (HTML) # event-message

Browser compatibility

BCD tables only load in the browser