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 Schreibgeschützt

Die vom Nachrichten-Emitter gesendeten Daten.

MessageEvent.origin Schreibgeschützt

Ein String, der die Herkunft des Nachrichten-Emitters repräsentiert.

MessageEvent.lastEventId Schreibgeschützt

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

MessageEvent.source Schreibgeschützt

Ein MessageEventSource (kann ein WindowProxy, MessagePort oder ServiceWorker-Objekt sein), das den Nachrichten-Emitter repräsentiert.

MessageEvent.ports Schreibgeschützt

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

Nehmen wir an, ein Skript erstellt einen MessageChannel und sendet einen der Ports in einen anderen Browsing-Kontext, wie zum Beispiel in ein anderes <iframe>, mit folgendem Code:

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 beginnt, Nachrichten darauf zu hören, indem es folgenden Code verwendet:

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 notwendig, 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 der Kanalnachrichtensendung