DasMessageChannel-Interface derChannel Messaging API ermöglicht es uns, einen neuen Nachrichtenkanal zu erstellen und Daten über seine beidenMessagePort-Eigenschaften zu senden.

Konstruktor

MessageChannel()

Gibt ein neuesMessageChannel-Objekt mit zwei neuenMessagePort-Objekten zurück.

Instanzeigenschaften

MessageChannel.port1Schreibgeschützt

Gibt port1 des Kanals zurück.

MessageChannel.port2Schreibgeschützt

Gibt port2 des Kanals zurück.

Beispiel

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

Wenn das IFrame geladen ist, registrieren wir einenonmessage-Handler fürMessageChannel.port1 und übertragenMessageChannel.port2 zusammen mit einer Nachricht an das IFrame über die Methodewindow.postMessage.

Wenn eine Nachricht vom IFrame zurückgesendet wird, gibt die FunktiononMessage 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 loadiframe.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 port1function onMessage(e) {  output.innerHTML = e.data;}

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

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Verwendung von Kanalnachrichten