Window: message event

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignis-Handler-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 Daten, die vom Nachrichtensender gesendet wurden.

MessageEvent.origin Schreibgeschützt

Ein String, der den Ursprung des Nachrichtensenders darstellt.

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

MessageEvent.ports Schreibgeschützt

Ein Array von MessagePort-Objekten, die die Ports repräsentieren, die mit dem Kanal verbunden sind, durch den die Nachricht gesendet wird (wo angemessen, z.B. im Channel-Messaging 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 einem 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 auf die Nachricht mit addEventListener() mit einem Code wie diesem lauschen:

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

Alternativ könnte der Listener die onmessage-Ereignis-Handler-Eigenschaft verwenden:

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

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