MessagePort

Erbt Methoden von seinem Elternteil, EventTarget.

postMessage()

Sendet eine Nachricht vom Port und überträgt optional die Eigentümerschaft von Objekten an andere Browsing-Kontexte.

start()

Startet das Senden von im Port wartenden Nachrichten (nur erforderlich bei Verwendung von EventTarget.addEventListener; es ist impliziert bei der Verwendung von onmessage).

close()

Trennt den Port, sodass er nicht mehr aktiv ist.

Erbt Ereignisse von seinem Elternteil, EventTarget.

message

Wird ausgelöst, wenn ein MessagePort-Objekt eine Nachricht erhält.

messageerror

Wird ausgelöst, wenn ein MessagePort-Objekt eine Nachricht erhält, die nicht deserialisiert werden kann.

Im folgenden Beispiel sehen Sie, wie ein neuer Kanal mit dem MessageChannel()-Konstruktor erstellt wird.

Wenn das IFrame geladen ist, registrieren wir einen onmessage-Handler für MessageChannel.port1 und übertragen MessageChannel.port2 an das IFrame mittels der Methode window.postMessage zusammen mit einer Nachricht.

Wenn eine Nachricht vom IFrame zurückkommt, gibt die onMessage-Funktion die Nachricht an einen Absatz aus.

const channel = new MessageChannel();
const output = document.querySelector(".output");
const iframe = document.querySelector("iframe");

// Wait for the iframe to load
iframe.addEventListener("load", onLoad);

function onLoad() {
  // Listen for messages on port1
  channel.port1.onmessage = onMessage;

  // Transfer port2 to the iframe
  iframe.contentWindow.postMessage("Hello from the main page!", "*", [
    channel.port2,
  ]);
}

// Handle messages received on port1
function onMessage(e) {
  output.innerHTML = e.data;
}

Für ein vollständiges funktionierendes Beispiel, schauen Sie sich unser Kanal-Messaging-Grundlagen-Demo auf GitHub an (starten Sie es auch live).

• Verwendung von Kanal-Messaging