BroadcastChannel: message event
Baseline 2022
Newly available
Since March 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
The message
event is fired on a BroadcastChannel
object when a message arrives on that channel.
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
In addition to the properties listed below, properties from the parent interface, Event
, are available.
data
Read only-
The data sent by the message emitter.
origin
Read only-
A string representing the origin of the message emitter.
lastEventId
Read only-
A string representing a unique ID for the event.
source
Read only-
A message event source, which is either a WindowProxy, a
MessagePort
, or aServiceWorker
object representing the message emitter. ports
Read only-
An array of
MessagePort
objects representing the ports associated with the channel the message is being sent through (where appropriate, e.g. in channel messaging or when sending a message to a shared worker).
Examples
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 # event-message |
HTML Standard # handler-broadcastchannel-onmessage |
Browser compatibility
BCD tables only load in the browser
See also
- Related events:
messageerror
.