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 |
Examples
Live example
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 | Status |
---|---|
HTML Living Standard | Living Standard |
Browser compatibility
BCD tables only load in the browser
See also
- Related events:
messageerror
.