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.

* Some parts of this feature may have varying levels of support.

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.

EventTarget MessagePort

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 von onmessage).

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.

js
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

Specification
HTML
# message-ports

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
Node.js
MessagePort
close
message event
messageerror event
postMessage
options.includeUserActivation parameter
Non-standard
start
Available in workers

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Non-standard. Check cross-browser support before using.
See implementation notes.
Has more compatibility info.

Siehe auch