Themessage event is fired on aWindow object when the window receives a message, for example from a call toWindow.postMessage() from another browsing context.

This event is not cancellable and does not bubble.

Syntax

Use the event name in methods likeaddEventListener(), or set an event handler property.

addEventListener("message", (event) => { })onmessage = (event) => { }

Event type

AMessageEvent. Inherits fromEvent.

Event properties

This interface also inherits properties from its parent,Event.

MessageEvent.dataRead only

The data sent by the message emitter.

MessageEvent.originRead only

A string representing the origin of the message emitter.

MessageEvent.lastEventIdRead only

A string representing a unique ID for the event.

MessageEvent.sourceRead only

AMessageEventSource (which can be aWindowProxy,MessagePort, orServiceWorker object) representing the message emitter.

MessageEvent.portsRead only

An array ofMessagePort 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 usingaddEventListener() with code like this:

window.addEventListener("message", (event) => {  console.log(`Received message: ${event.data}`);});

Alternatively the listener could use theonmessage event handler property:

window.onmessage = (event) => {  console.log(`Received message: ${event.data}`);};

Specifications

Browser compatibility

See also

• Related events:messageerror.
• Window.postMessage().