The message
event is fired on a MessagePort
object when a message arrives on that channel.
Bubbles | No |
Cancelable | No |
Interface | MessageEvent
|
Event handler property | onmessage
|
Examples
Suppose a script creates a MessageChannel
and sends one of the ports to a different browsing context, such as another <iframe>
, using code like this:
const channel = new MessageChannel();
const myPort = channel.port1;
const targetFrame = window.top.frames[1];
const targetOrigin = 'https://example.org';
const messageControl = document.querySelector('#message');
const channelMessageButton = document.querySelector('#channel-message');
channelMessageButton.addEventListener('click', () => {
myPort.postMessage(messageControl.value);
})
targetFrame.postMessage('init', targetOrigin, [channel.port2]);
The target can receive the port and start listening for messages on it using code like this:
window.addEventListener('message', (event) => {
const myPort = event.ports[0];
myPort.addEventListener('message', (event) => {
received.textContent = event.data;
});
myPort.start();
});
Note that the listener must call MessagePort.start()
before any messages will be delivered to this port. This is only needed when using the addEventListener()
method: if the receiver uses onmessage
instead, start()
is called implicitly:
window.addEventListener('message', (event) => {
const myPort = event.ports[0];
myPort.onmessage = (event) => {
received.textContent = event.data;
};
});
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 4 |
Edge
Full support 12 |
Firefox
Full support Yes |
IE
Full support 10 |
Opera
Full support 10.6 |
Safari
Full support 5 |
WebView Android
Full support Yes |
Chrome Android
Full support 18 |
Firefox Android
No support No |
Opera Android
Full support 11.5 |
Safari iOS
Full support 5.1 |
Samsung Internet Android
Full support 1.0 |
Legend
- Full support
- Full support
- No support
- No support
See also
- Related events:
messageerror
. - Using channel messaging
MessagePort: message event by Mozilla Contributors is licensed under CC-BY-SA 2.5.