MessagePort: message Ereignis

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

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

onmessage = (event) => {};

Ein MessageEvent. Erbt von Event.

Diese Schnittstelle erbt auch Eigenschaften von ihrem Elternobjekt, Event.

MessageEvent.data Schreibgeschützt

Die von dem Nachrichtensender gesendeten Daten.

MessageEvent.origin Schreibgeschützt

Ein String, der den Ursprung des Nachrichtensenders repräsentiert.

MessageEvent.lastEventId Schreibgeschützt

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

MessageEvent.source Schreibgeschützt

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

MessageEvent.ports Schreibgeschützt

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

Angenommen, ein Skript erstellt einen MessageChannel und sendet einen der Ports in einen anderen Browsing-Kontext, wie 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 mit folgendem Code beginnen, Nachrichten darauf zu empfangen:

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

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

  myPort.start();
});

Es ist zu beachten, dass der Listener MessagePort.start() aufrufen muss, bevor irgendwelche Nachrichten an diesen Port geliefert werden. Dies ist nur erforderlich, wenn die Methode addEventListener() 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 Channel Messaging