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.
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