MessagePort: message-Ereignis

Baseline

Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit September 2015 browserübergreifend verfügbar.

Vollständige Kompatibilität anzeigen
Mehr erfahren

Hinweis: Diese Funktion ist in Web Workers verfügbar.

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

Dieses Ereignis kann nicht abgebrochen werden und steigt nicht im DOM-Baum auf.

Syntax

Verwenden Sie den Ereignisnamen in addEventListener():

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

Alternativ können Sie der Event-Handler-Eigenschaft der Schnittstelle einen Wert zuweisen:

onmessage = (event) => { }

Beispiele

Angenommen, ein Skript erstellt einen MessageChannel und sendet einen der Ports an einen anderen Browsing-Kontext, beispielsweise an ein anderes <iframe>. Dazu könnte es folgenden Code verwenden:

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]);

Der Zielkontext kann den Port empfangen und mit folgendem Code auf Nachrichten und Nachrichtenfehler an diesem Port warten:

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 Nachrichten an diesen Port zugestellt werden. Dies ist nur bei Verwendung der Methode addEventListener() erforderlich: Verwendet der Empfänger stattdessen onmessage, wird start() implizit aufgerufen. Das folgende Beispiel verwendet onmessage und onmessageerror. Beachten Sie jedoch, dass dadurch gegebenenfalls andere über onmessage und onmessageerror hinzugefügte Ereignis-Listener ersetzt werden:

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

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

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

Spezifikationen

Spezifikation
HTML # event-message
HTML # handler-messageeventtarget-onmessage

Browser-Kompatibilität

Siehe auch

Verwandtes Ereignis: messageerror.
Channel Messaging verwenden

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden