Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
MessagePort
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 inWeb Workers verfügbar.
DasMessagePort-Interface derChannel Messaging API repräsentiert einen der beiden Ports einesMessageChannel, welcher es ermöglicht, Nachrichten von einem Port zu senden und sie am anderen zu empfangen.
MessagePort ist eintransferierbares 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.
messageWird ausgelöst, wenn ein
MessagePort-Objekt eine Nachricht erhält.messageerrorWird 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 demMessageChannel()-Konstruktor erstellt wird.
Wenn das IFrame geladen ist, registrieren wir einenonmessage-Handler fürMessageChannel.port1 und übertragenMessageChannel.port2 an das IFrame mittels der Methodewindow.postMessage zusammen mit einer Nachricht.
Wenn eine Nachricht vom IFrame zurückkommt, gibt dieonMessage-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 loadiframe.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 port1function onMessage(e) { output.innerHTML = e.data;}Für ein vollständiges funktionierendes Beispiel, schauen Sie sich unserKanal-Messaging-Grundlagen-Demo auf GitHub an (starten Sie es auch live).
Spezifikationen
| Specification |
|---|
| HTML # message-ports |