BroadcastChannel: message event
BaselineWidely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022.
Note: This feature is available inWeb Workers.
Themessage event of theBroadcastChannel interface fires when a message arrives on that channel.
Syntax
Use the event name in methods likeaddEventListener(), or set an event handler property.
addEventListener("message", (event) => { })onmessage = (event) => { }Event type
AMessageEvent. Inherits fromEvent.
Event properties
In addition to the properties listed below, properties from the parent interface,Event, are available.
dataRead onlyThe data sent by the message emitter.
originRead onlyA string representing the origin of the message emitter.
lastEventIdRead onlyA string representing a unique ID for the event.
sourceRead onlyAmessage event source, which is either aWindowProxy, a
MessagePort, or aServiceWorkerobject representing the message emitter.portsRead onlyAn array of
MessagePortobjects 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
<h1>Sender</h1><label for="message">Type a message to broadcast:</label><br /><textarea name="message" rows="1" cols="40">Hello</textarea><button type="button">Broadcast message</button>body { border: 1px solid black; padding: 0.5rem; height: 150px; font-family: "Fira Sans", sans-serif;}h1 { font: 1.6em "Fira Sans", sans-serif; margin-bottom: 1rem;}textarea { padding: 0.2rem;}label,br { margin: 0.5rem 0;}button { vertical-align: top; height: 1.5rem;}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
<h1>Receiver 1</h1><div></div>body { border: 1px solid black; padding: 0.5rem; height: 100px; font-family: "Fira Sans", sans-serif;}h1 { font: 1.6em "Fira Sans", sans-serif; margin-bottom: 1rem;}const channel = new BroadcastChannel("example-channel");channel.addEventListener("message", (event) => { received.textContent = event.data;});Receiver 2
<h1>Receiver 2</h1><div></div>body { border: 1px solid black; padding: 0.5rem; height: 100px; font-family: "Fira Sans", sans-serif;}h1 { font: 1.6em "Fira Sans", sans-serif; margin-bottom: 1rem;}const channel = new BroadcastChannel("example-channel");channel.addEventListener("message", (event) => { received.textContent = event.data;});Result
Specifications
| Specification |
|---|
| HTML # event-message |
| HTML # handler-broadcastchannel-onmessage |
Browser compatibility
See also
- Related events:
messageerror.