Window: message event

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignishandlereigenschaft.

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

onmessage = (event) => {};

Ein MessageEvent. Erbt von Event.

Diese Schnittstelle erbt auch Eigenschaften von ihrem übergeordneten Interface, Event.

MessageEvent.data Schreibgeschützt

Die vom Nachrichtenemittenten gesendeten Daten.

MessageEvent.origin Schreibgeschützt

Ein String, der den Ursprung des Nachrichtenemittenten 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), das den Nachrichtenemittenten darstellt.

MessageEvent.ports Schreibgeschützt

Ein Array von MessagePort-Objekten, die die mit dem Kanal verbundenen Ports darstellen, durch den die Nachricht gesendet wird (wenn zutreffend, z.B. bei der Kanalnachrichtenübermittlung oder beim Senden einer Nachricht an einen Shared Worker).

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

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() wie folgt hören:

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

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

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

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