Window: message event

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Das message-Ereignis wird auf einem Window-Objekt ausgelöst, wenn das Fenster eine Nachricht empfängt, beispielsweise durch einen Aufruf von Window.postMessage() aus einem anderen Browsing-Kontext.

Dieses Ereignis kann nicht abgebrochen werden und es durchläuft keine Bubble-Phase.

Syntax

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

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

onmessage = (event) => {};

Ereignistyp

Ereigniseigenschaften

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

MessageEvent.data Nur lesbar

Die vom Nachrichtenemittenten gesendeten Daten.

MessageEvent.origin Nur lesbar

Ein String, der den Ursprung des Nachrichtenemittenten darstellt.

MessageEvent.lastEventId Nur lesbar

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

MessageEvent.source Nur lesbar

Eine MessageEventSource (die ein WindowProxy, MessagePort oder ServiceWorker-Objekt sein kann), das den Nachrichtenemittenten darstellt.

MessageEvent.ports Nur lesbar

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

Beispiele

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

js
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:

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

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

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

Spezifikationen

Specification
HTML Standard
# event-message
HTML Standard
# handler-window-onmessage

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch