MessageChannel: MessageChannel()-Konstruktor

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.

Der MessageChannel()-Konstruktor der MessageChannel-Schnittstelle gibt ein neues MessageChannel-Objekt mit zwei neuen MessagePort-Objekten zurück.

Syntax

new MessageChannel()

Im folgenden Codeblock sehen Sie, wie ein neuer Kanal mit dem MessageChannel()-Konstruktor erstellt wird. Wenn das <iframe> geladen ist, übergeben wir port2 an das <iframe> unter Verwendung von MessagePort.postMessage zusammen mit einer Nachricht. Der handleMessage-Handler reagiert dann auf eine Nachricht, die vom <iframe> zurückgesendet wird (unter Verwendung von onmessage) und fügt diese in einen Absatz ein. Auf den port1 wird gelauscht, um zu prü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);

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 Kanal-Messaging-Grundlagen-Demo auf GitHub (testen Sie es auch live).