MessagePort: message-Ereignis

Baseline Widely available

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

Hinweis: Dieses Feature ist verfügbar in Web Workers.

Das message-Ereignis wird bei einem MessagePort-Objekt ausgelöst, wenn eine Nachricht auf diesem Kanal ankommt.

Dieses Ereignis kann nicht abgebrochen werden und wird nicht weitergeleitet.

Syntax

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

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

onmessage = (event) => {};

Ereignistyp

Ereigniseigenschaften

Diese Schnittstelle erbt auch Eigenschaften von ihrem Elternteil, Event.

MessageEvent.data Nur lesbar

Die vom Nachrichtensender gesendeten Daten.

MessageEvent.origin Nur lesbar

Ein String, der den Ursprung des Nachrichtensenders 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), die den Nachrichtensender darstellt.

MessageEvent.ports Nur lesbar

Ein Array, das alle MessagePort-Objekte enthält, die zusammen mit der Nachricht gesendet wurden, in Reihenfolge.

Beispiele

Angenommen, ein Skript erstellt einen MessageChannel und sendet einen der Ports an einen anderen Browsing-Kontext, wie z.B. ein anderes <iframe>, mit einem Code wie diesem:

js
const channel = new MessageChannel();
const myPort = channel.port1;
const targetFrame = window.top.frames[1];
const targetOrigin = "https://example.org";

const messageControl = document.querySelector("#message");
const channelMessageButton = document.querySelector("#channel-message");

channelMessageButton.addEventListener("click", () => {
  myPort.postMessage(messageControl.value);
});

targetFrame.postMessage("init", targetOrigin, [channel.port2]);

Das Ziel kann den Port empfangen und beginnen, mit einem Code wie diesem darauf Nachrichten zu empfangen:

js
window.addEventListener("message", (event) => {
  const myPort = event.ports[0];

  myPort.addEventListener("message", (event) => {
    received.textContent = event.data;
  });

  myPort.start();
});

Beachten Sie, dass der Listener MessagePort.start() aufrufen muss, bevor Nachrichten an diesen Port zugestellt werden. Dies ist nur erforderlich, wenn die addEventListener()-Methode verwendet wird: Wenn der Empfänger stattdessen onmessage verwendet, wird start() implizit aufgerufen:

js
window.addEventListener("message", (event) => {
  const myPort = event.ports[0];

  myPort.onmessage = (event) => {
    received.textContent = event.data;
  };
});

Spezifikationen

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

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch