MessageChannel: port2-Eigenschaft

Ein MessagePort-Objekt, das den zweiten Port des Kanals repräsentiert, den Port, der mit dem Kontext am anderen Ende des Kanals verbunden ist.

Im folgenden Codeblock sehen Sie, wie ein neuer Kanal mithilfe des MessageChannel()-Konstruktors erstellt wird. Sobald das IFrame geladen ist, übergeben wir port2 zusammen mit einer Nachricht an das IFrame mithilfe von MessagePort.postMessage. Der handleMessage-Handler reagiert dann auf eine Nachricht, die vom IFrame zurückgesendet wird (mit onmessage), indem er sie in einen Absatz einfügt. port1 wird überwacht, um zu prüfen, wann die Nachricht eintrifft.

const channel = new MessageChannel();
const para = document.querySelector("p");

const ifr = document.querySelector("iframe");
const otherWindow = ifr.contentWindow;

ifr.addEventListener("load", iframeLoaded, false);

function iframeLoaded() {
  otherWindow.postMessage("Hello from the main page!", "*", [channel.port2]);
}

channel.port1.onmessage = handleMessage;
function handleMessage(e) {
  para.innerHTML = e.data;
}

Für ein vollständiges funktionierendes Beispiel sehen Sie sich unser Beispiel für grundlegende Kanalnachrichtenübertragung auf GitHub an (führen Sie es auch live aus).

• Verwendung der Kanalnachrichtenübertragung