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

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

AMessageEvent. Inherits fromEvent.

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

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}`);};

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