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: Diese Funktion ist in Web Workers verfügbar.

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

Dieses Ereignis kann nicht abgebrochen werden und löst keine Ereigniskette aus.

Syntax

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

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

onmessage = (event) => { }

Ereigniseigenschaften

Diese Schnittstelle erbt auch Eigenschaften von ihrem übergeordneten Element Event.

MessageEvent.data Schreibgeschützt: Die vom Nachrichtenemitter gesendeten Daten.
MessageEvent.origin Schreibgeschützt: Ein String, der den Ursprung des Nachrichtenemitters repräsentiert.
MessageEvent.lastEventId Schreibgeschützt: Ein String, der eine eindeutige ID für das Ereignis darstellt.
MessageEvent.source Schreibgeschützt: Eine MessageEventSource (kann ein WindowProxy, MessagePort oder ServiceWorker-Objekt sein), die den Nachrichtenemitter darstellt.
MessageEvent.ports Schreibgeschützt: Ein Array, das alle MessagePort-Objekte enthält, die mit der Nachricht in der Reihenfolge gesendet wurden.

Beispiele

Angenommen, ein Skript erstellt einen MessageChannel und sendet einen der Ports an einen anderen Browsing-Kontext, wie zum Beispiel ein anderes <iframe>, mit 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 damit beginnen, auf Nachrichten und Nachricht-Fehler darauf zu hören, indem es Code wie diesen verwendet:

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

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

  myPort.addEventListener("messageerror", (event) => {
    console.error(event.data);
  });

  myPort.start();
});

Beachten Sie, dass der Listener MessagePort.start() aufrufen muss, bevor irgendwelche Nachrichten an diesen Port zugestellt 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;
  };

  myPort.onmessageerror = (event) => {
    console.error(event.data);
  };
});