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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
message eventChrome Full support 54Edge ? Firefox Full support 38IE No support NoOpera Full support 41Safari No support NoWebView Android Full support 54Chrome Android Full support 54Edge Mobile ? Firefox Android ? Opera Android Full support 41Safari iOS No support NoSamsung Internet Android Full support 6.0

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown

See also

Document Tags and Contributors

Last updated by: chrisdavidmills,