MessageChannel: MessageChannel()-Konstruktor

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit September 2015 browserübergreifend verfügbar.

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.

In diesem Artikel

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.

js
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).

Verwendung von Kanal-Messaging

Help improve MDN

War diese Übersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

Channel Messaging API
MessageChannel
Konstruktor
1. MessageChannel()
Instanzeigenschaften
1. port1
2. port2
Verwandte Seiten für Channel Messaging API
1. MessagePort
Anleitungen
1. Verwendung von Kanalnachrichten

MessageChannel: MessageChannel()-Konstruktor

In diesem Artikel

Syntax

Parameter

Rückgabewert

Beispiele

Spezifikationen

Browser-Kompatibilität

Siehe auch

Help improve MDN