Window: message event

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignisbehandlungs-Eigenschaft.

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

onmessage = (event) => { }

Ein MessageEvent. Erbt von Event.

Diese Schnittstelle erbt auch Eigenschaften von ihrem Elternteil, Event.

MessageEvent.data Schreibgeschützt

Die von dem Nachrichtensender übermittelten Daten.

MessageEvent.origin Schreibgeschützt

Ein String, der den Ursprung des Nachrichtensenders repräsentiert.

MessageEvent.lastEventId Schreibgeschützt

Ein String, der eine eindeutige ID für das Ereignis darstellt.

MessageEvent.source Schreibgeschützt

Eine MessageEventSource (die ein WindowProxy, MessagePort oder ServiceWorker-Objekt sein kann), die den Nachrichtensender repräsentiert.

MessageEvent.ports Schreibgeschützt

Ein Array von MessagePort-Objekten, die die Ports repräsentieren, die mit dem Kanal verbunden sind, über den die Nachricht gesendet wird (soweit zutreffend, z. B. bei der Kanalnachrichtenübertragung oder beim Senden einer Nachricht an einen Shared Worker).

Angenommen, ein Skript sendet eine Nachricht an einen anderen Browsing-Kontext, wie ein anderes <iframe>, mit Code wie diesem:

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

Der Empfänger kann für die Nachricht mit addEventListener() lauschen, indem er Code wie diesen verwendet:

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

Alternativ könnte der Listener die onmessage-Ereignisbehandlungseigenschaft verwenden:

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

• Verwandte Ereignisse: messageerror.
• Window.postMessage().