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
<h1>Sender</h1> <label for="message">Type a message to broadcast:</label><br/> <textarea id="message" name="message" rows="1" cols="40">Hello</textarea> <button id="broadcast-message" type="button">Broadcast message</button>
body { border: 1px solid black; padding: .5rem; height: 150px; font-family: "Fira Sans", sans-serif; } h1 { font: 1.6em "Fira Sans", sans-serif; margin-bottom: 1rem; } textarea { padding: .2rem; } label, br { margin: .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 id="received"></div>
body { border: 1px solid black; padding: .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 id="received"></div>
body { border: 1px solid black; padding: .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 | Status |
---|---|
HTML Living Standard | Living Standard |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
message event | Chrome Full support 54 | Edge Full support ≤79 | Firefox Full support 38 | IE No support No | Opera Full support 41 | Safari No support No | WebView Android Full support 54 | Chrome Android Full support 54 | Firefox Android ? | Opera Android Full support 41 | Safari iOS No support No | Samsung Internet Android Full support 6.0 |
Legend
- Full support
- Full support
- No support
- No support
- Compatibility unknown
- Compatibility unknown
See also
- Related events:
messageerror
.