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.
Update compatibility data on GitHub
| Desktop | Mobile | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
message event | Chrome Full support 54 | Edge ? | 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 | Edge Mobile ? | 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.
Document Tags and Contributors
Tags:
Contributors to this page:
chrisdavidmills,
wbamberg,
mdnwebdocs-bot,
Sheppy,
mfluehr,
sideshowbarker,
leonardosnt,
zhang12c,
armandombi,
erikadoyle,
teoli
Last updated by:
chrisdavidmills,