The message
event is fired on a Window
object when the window receives a message, for example from a call to Window.postMessage()
from another browsing context.
Bubbles | No |
Cancelable | No |
Interface | MessageEvent
|
Event handler property | onmessage
|
Examples
Suppose a script sends a message to a different browsing context, such as another <iframe>
, using code like this:
const targetFrame = window.top.frames[1];
const targetOrigin = 'https://example.org';
const windowMessageButton = document.querySelector('#window-message');
windowMessageButton.addEventListener('click', () => {
targetFrame.postMessage('hello there', targetOrigin);
});
The receiver can listen for the message using addEventListener()
with code like this:
window.addEventListener('message', (event) => {
console.log(`Received message: ${event.data}`);
});
Alternatively the listener could use the onmessage
event handler property:
window.onmessage = (event) => {
console.log(`Received message: ${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 60 |
Edge
Full support ≤79 |
Firefox
? |
IE
? |
Opera
Full support 47 |
Safari
? |
WebView Android
Full support 60 |
Chrome Android
Full support 60 |
Firefox Android
? |
Opera Android
Full support 47 |
Safari iOS
? |
Samsung Internet Android
Full support 8.0 |
Legend
- Full support
- Full support
- Compatibility unknown
- Compatibility unknown
See also
- Related events:
messageerror
. Window.postMessage()
.
Window: message event by Mozilla Contributors is licensed under CC-BY-SA 2.5.