Channel Messaging API
Hinweis: Dieses Feature ist verfügbar in Web Workers.
Die Channel Messaging API ermöglicht es, dass zwei separate Skripte, die in unterschiedlichen Browserkontexten an dasselbe Dokument angehängt sind (z. B. zwei IFrames oder das Hauptdokument und ein IFrame, zwei Dokumente über einen SharedWorker, oder zwei Worker), direkt miteinander kommunizieren, indem sie Nachrichten über bidirektionale Kanäle (oder Pipes) mit einem Port an jedem Ende austauschen.
Konzepte und Verwendung
Ein Nachrichtenkanal wird mithilfe des Konstruktors MessageChannel() erstellt. Einmal erstellt, können die beiden Ports des Kanals über die Eigenschaften MessageChannel.port1 und MessageChannel.port2 zugegriffen werden (die beide MessagePort-Objekte zurückgeben.) Die Anwendung, die den Kanal erstellt hat, verwendet port1, und die Anwendung am anderen Ende des Ports verwendet port2 – Sie senden eine Nachricht an port2 und übertragen den Port in den anderen Browserkontext mithilfe von window.postMessage zusammen mit zwei Argumenten (der zu sendenden Nachricht und dem Objekt, dessen Besitz übertragen wird, in diesem Fall der Port selbst.)
Wenn diese übertragbaren Objekte übertragen werden, können sie im ursprünglichen Kontext nicht mehr verwendet werden. Ein Port kann, nachdem er gesendet wurde, vom ursprünglichen Kontext nicht mehr genutzt werden.
Der andere Browserkontext kann die Nachricht mithilfe von onmessage empfangen und den Inhalt der Nachricht anhand des data-Attributs des Ereignisses erfassen. Sie könnten dann antworten, indem Sie eine Nachricht zurück an das ursprüngliche Dokument mithilfe von MessagePort.postMessage senden.
Wenn Sie das Senden von Nachrichten über den Kanal beenden möchten, können Sie MessagePort.close aufrufen, um die Ports zu schließen.
Erfahren Sie mehr darüber, wie Sie diese API verwenden können, in Verwendung der Nachrichtenkanal-API.
Schnittstellen
MessageChannel-
Erstellt einen neuen Nachrichtenkanal zum Senden von Nachrichten.
MessagePort-
Steuert die Ports im Nachrichtenkanal und ermöglicht das Senden von Nachrichten von einem Port und das Empfangen dieser am anderen.
Beispiele
- Wir haben ein Grundlegendes Demobeispiel für Nachrichtenkanäle auf GitHub veröffentlicht (führen Sie es auch live aus), das einen sehr einfachen Einzelnachrichtentransfer zwischen einer Seite und einem eingebetteten
<iframe>zeigt. - Sie können auch ein Multimessaging-Demo sehen (diese live ausführen), das eine etwas komplexere Einrichtung zeigt, die mehrere Nachrichten zwischen Hauptseite und IFrame senden kann.
Spezifikationen
| Specification |
|---|
| HTML Standard # channel-messaging |
Browser-Kompatibilität
api.MessageChannel
BCD tables only load in the browser
api.MessagePort
BCD tables only load in the browser