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

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
# event-message
HTML
# handler-window-onmessage

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
message event

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch