MessagePort: message-Ereignis

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

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

onmessage = (event) => {};

Ein MessageEvent. Erbt von Event.

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.

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:

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:

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:

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

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

• Verwandte Ereignisse: messageerror.
• Verwendung von Kanalnachrichten