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. Wenn das IFrame geladen ist, übergeben wir port2 an das IFrame mithilfe von Window.postMessage() zusammen mit einer Nachricht. Der handleMessage-Handler antwortet dann auf eine Nachricht, die vom IFrame zurückgesendet wird (mittels onmessage), und fügt sie in einen Absatz ein. port1 wird beobachtet, um zu überprüfen, wann die Nachricht ankommt.

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, siehe unser channel messaging basic demo auf GitHub (auch live ausführen).

• Verwendung von Channel Messaging