MessageChannel

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

Das MessageChannel-Interface der Channel Messaging API ermöglicht es uns, einen neuen Nachrichtenkanal zu erstellen und Daten über seine beiden MessagePort-Eigenschaften zu senden.

Konstruktor

MessageChannel()

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

Instanzeigenschaften

MessageChannel.port1 Nur lesbar

Gibt port1 des Kanals zurück.

MessageChannel.port2 Nur lesbar

Gibt port2 des Kanals zurück.

Beispiel

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.

js
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).

Spezifikationen

Specification
HTML Standard
# message-channels

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch