MessageChannel

MessageChannel()

Gibt ein neues MessageChannel-Objekt mit zwei neuen MessagePort-Objekten zurück.

MessageChannel.port1 Nur lesbar

Gibt port1 des Kanals zurück.

MessageChannel.port2 Nur lesbar

Gibt port2 des Kanals zurück.

Im folgenden Beispiel sehen Sie, wie ein neuer Kanal mit Hilfe des MessageChannel()-Konstruktors erstellt wird.

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

Wenn eine Nachricht vom IFrame zurückgesendet wird, gibt die Funktion onMessage die Nachricht in einem 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;
}

Ein komplett funktionierendes Beispiel finden Sie in unserem Grunddemonstrationsprojekt zur Kanalnachrichtübermittlung auf GitHub (auch live ausführen).

• Verwendung von Kanalnachrichten