MessagePort
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.
Das MessagePort-Interface der Channel Messaging API repräsentiert einen der beiden Ports eines MessageChannel, welcher es ermöglicht, Nachrichten von einem Port zu senden und sie am anderen zu empfangen.
MessagePort ist ein transferierbares Objekt.
Instanzmethoden
Erbt Methoden von seinem Elternteil, EventTarget.
postMessage()-
Sendet eine Nachricht vom Port und überträgt optional die Eigentümerschaft von Objekten an andere Browsing-Kontexte.
start()-
Startet das Senden von im Port wartenden Nachrichten (nur erforderlich bei Verwendung von
EventTarget.addEventListener; es ist impliziert bei der Verwendung vononmessage). close()-
Trennt den Port, sodass er nicht mehr aktiv ist.
Ereignisse
Erbt Ereignisse von seinem Elternteil, EventTarget.
message-
Wird ausgelöst, wenn ein
MessagePort-Objekt eine Nachricht erhält. messageerror-
Wird ausgelöst, wenn ein
MessagePort-Objekt eine Nachricht erhält, die nicht deserialisiert werden kann.
Beispiel
Im folgenden Beispiel sehen Sie, wie ein neuer Kanal mit dem MessageChannel()-Konstruktor erstellt wird.
Wenn das IFrame geladen ist, registrieren wir einen onmessage-Handler für MessageChannel.port1 und übertragen MessageChannel.port2 an das IFrame mittels der Methode window.postMessage zusammen mit einer Nachricht.
Wenn eine Nachricht vom IFrame zurückkommt, gibt die onMessage-Funktion die Nachricht an einen Absatz aus.
const channel = new MessageChannel();
const output = document.querySelector(".output");
const iframe = document.querySelector("iframe");
// Wait for the iframe to load
iframe.addEventListener("load", onLoad);
function onLoad() {
// Listen for messages on port1
channel.port1.onmessage = onMessage;
// Transfer port2 to the iframe
iframe.contentWindow.postMessage("Hello from the main page!", "*", [
channel.port2,
]);
}
// Handle messages received on port1
function onMessage(e) {
output.innerHTML = e.data;
}
Für ein vollständiges funktionierendes Beispiel, schauen Sie sich unser Kanal-Messaging-Grundlagen-Demo auf GitHub an (starten Sie es auch live).
Spezifikationen
| Spezifikation |
|---|
| HTML # message-ports |