Window: message event
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.
This event is not cancellable and does not bubble.
Syntax
Use the event name in methods like addEventListener()
, or set an event handler property.
addEventListener('message', event => { });
onmessage = event => { };
Event type
An MessageEvent
. Inherits from Event
.
Event properties
This interface also inherits properties from its parent, Event
.
MessageEvent.data
Read only-
The data sent by the message emitter.
MessageEvent.origin
Read only-
A
USVString
representing the origin of the message emitter. MessageEvent.lastEventId
Read only-
A
DOMString
representing a unique ID for the event. MessageEvent.source
Read only-
A
MessageEventSource
(which can be aWindowProxy
,MessagePort
, orServiceWorker
object) representing the message emitter. MessageEvent.ports
Read only-
An array of
MessagePort
objects representing the ports associated with the channel the message is being sent through (where appropriate, e.g. in channel messaging or when sending a message to a shared worker).
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 |
---|
HTML Standard # event-message |
Browser compatibility
BCD tables only load in the browser
See also
- Related events:
messageerror
. Window.postMessage()
.