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: Diese Funktion ist in Web Workers verfügbar.
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 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 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).
Spezifikationen
| Specification |
|---|
| HTML # message-channels |
Browser-Kompatibilität
Loading…