DieChannel Messaging API ermöglicht es, zwei separate Skripte, die in verschiedenen Browserkontexten ausgeführt werden und mit demselben Dokument verbunden sind (z.B. zwei<iframe>-Elemente, das Hauptdokument und ein einzelnes<iframe>, oder zwei Dokumente über einenSharedWorker), direkt zu kommunizieren. Nachrichten können durch Zweikanäle (oder Rohre) mit einem Port an jedem Ende zwischen ihnen ausgetauscht werden.

In diesem Artikel werden wir die Grundlagen der Nutzung dieser Technologie erläutern.

Anwendungsfälle

Kanalnachrichten sind vor allem nützlich in Fällen, in denen Sie eine soziale Seite haben, die Funktionen anderer Seiten über iframes in ihre Hauptschnittstelle einbettet, wie z.B. Spiele, Adressbücher oder ein Audioplayer mit personalisierten Musikwahlen. Wenn diese als eigenständige Einheiten agieren, ist alles in Ordnung, aber die Schwierigkeit entsteht, wenn Sie Interaktionen zwischen der Hauptseite und den<iframe>-Elementen oder zwischen verschiedenen<iframe>-Elementen wünschen. Zum Beispiel, was wäre, wenn Sie einen Kontakt vom Hauptseite zum Adressbuch hinzufügen, die Highscores Ihres Spiels zu Ihrem Hauptprofil hinzufügen oder neue Hintergrundmusikoptionen vom Audioplayer zum Spiel hinzufügen möchten? Solche Dinge sind mit herkömmlicher Webtechnologie nicht so einfach, da die Sicherheitsmodelle des Webs bedacht werden müssen. Sie müssen überlegen, ob die Ursprünge einander vertrauen und wie die Nachrichten übermittelt werden sollen.

Nachrichtenkanäle können dagegen einen sicheren Kanal bieten, der es ermöglicht, Daten zwischen verschiedenen Browserkontexten auszutauschen.

Einfache Beispiele

Um Ihnen den Einstieg zu erleichtern, haben wir ein paar Demos auf GitHub veröffentlicht. Schauen Sie sich zuerst unsereGrunddemonstration zur Kanalnachricht (führen Sie es auch live aus) an, die eine wirklich einfache einmalige Nachrichtenübertragung zwischen einer Seite und einem eingebetteten<iframe> zeigt.

Zweitens sehen Sie sich unsereMultimessaging-Demo an (führen Sie diese live aus), die ein etwas komplexeres Setup zeigt, das mehrere Nachrichten zwischen der Hauptseite und einem IFrame senden kann.

In diesem Artikel konzentrieren wir uns auf das letztere Beispiel, das folgendermaßen aussieht:

Erstellen des Kanals

Auf der Hauptseite der Demo haben wir ein einfaches Formular mit einer Texteingabe, um Nachrichten einzugeben, die an ein<iframe> gesendet werden sollen. Wir haben auch einen Absatz, den wir später verwenden, um Bestätigungsnachrichten anzuzeigen, die wir vom<iframe> zurückerhalten.

const input = document.getElementById("message-input");const output = document.getElementById("message-output");const button = document.querySelector("button");const iframe = document.querySelector("iframe");const channel = new MessageChannel();const port1 = channel.port1;// Wait for the iframe to loadiframe.addEventListener("load", onLoad);function onLoad() {  // Listen for button clicks  button.addEventListener("click", onClick);  // Listen for messages on port1  port1.onmessage = onMessage;  // Transfer port2 to the iframe  iframe.contentWindow.postMessage("init", "*", [channel.port2]);}// Post a message on port1 when the button is clickedfunction onClick(e) {  e.preventDefault();  port1.postMessage(input.value);}// Handle messages received on port1function onMessage(e) {  output.innerHTML = e.data;  input.value = "";}

Wir beginnen damit, einen neuen Nachrichtenkanal mit demMessageChannel()-Konstruktor zu erstellen.

Wenn das IFrame geladen ist, registrieren wir einenonclick-Handler für unseren Button und einenonmessage-Handler fürMessageChannel.port1. Schließlich übertragen wirMessageChannel.port2 an das IFrame unter Verwendung derwindow.postMessage-Methode.

Lassen Sie uns dieiframe.contentWindow.postMessage-Zeile genauer untersuchen. Sie nimmt drei Argumente:

1. Die gesendete Nachricht. Für diese anfängliche Portübertragung könnte diese Nachricht ein leerer String sein, aber in diesem Beispiel ist sie auf'init' gesetzt.
2. Der Ursprung, an den die Nachricht gesendet werden soll.* bedeutet "jeder Ursprung".
3. Ein Objekt, dessen Besitz auf den empfangenden Browserkontext übertragen wird. In diesem Fall übertragen wirMessageChannel.port2 an das IFrame, damit es zur Kommunikation mit der Hauptseite verwendet werden kann.

Wenn unser Button geklickt wird, verhindern wir das normale Absenden des Formulars und senden dann den in unserer Texteingabe eingegebenen Wert an das IFrame über denMessageChannel.

Empfang des Ports und der Nachricht im IFrame

In den<iframe>-Elementen haben wir folgendes #"ul");let port2;// Listen for the initial port transfer messagewindow.addEventListener("message", initPort);// Setup the transferred portfunction initPort(e) { port2 = e.ports[0]; port2.onmessage = onMessage;}// Handle messages received on port2function onMessage(e) { const listItem = document.createElement("li"); listItem.textContent = e.data; list.appendChild(listItem); port2.postMessage(`Message received by IFrame: "${e.data}"`);}