MessagePort: postMessage()-Methode
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.
Die postMessage()-Methode des MessagePort-Interfaces sendet eine Nachricht vom Port und überträgt optional die Eigentümerschaft von Objekten an andere Browsing-Kontexte.
Syntax
postMessage(message)
postMessage(message, transfer)
postMessage(message, options)
Parameter
message-
Die Nachricht, die Sie über den Kanal senden möchten. Diese kann von jedem grundlegenden Datentyp sein. Mehrere Datenobjekte können als Array gesendet werden.
Hinweis: Ausführungskontexte, die miteinander Nachrichten austauschen können, befinden sich möglicherweise nicht im selben Agent-Cluster und können daher keinen Speicher gemeinsam nutzen.
SharedArrayBuffer-Objekte oder darauf basierende Pufferansichten können nicht über Agent-Cluster hinweg gepostet werden. Ein Versuch, dies zu tun, erzeugt einmessageerror-Ereignis mit einerDataCloneError-DOMExceptionauf der Empfangsseite. transferOptional-
Ein optionales Array von übertragbaren Objekten, deren Eigentümerschaft übertragen werden soll. Das Eigentum dieser Objekte wird auf die Empfängerseite übertragen und sie sind auf der Senderseite nicht mehr verwendbar. Diese übertragbaren Objekte werden nicht automatisch gesendet; sie müssen entweder in der Nachricht enthalten sein oder dem Empfänger auf andere Weise zugänglich gemacht werden, wie z.B.
MessagePortüberMessageEvent.ports. optionsOptional-
Ein optionales Objekt, das die folgenden Eigenschaften enthält:
transferOptional-
Hat die gleiche Bedeutung wie der
transfer-Parameter.
Rückgabewert
Keine (undefined).
Beispiele
Im folgenden Codeblock sehen Sie, wie ein neuer Kanal mit dem MessageChannel()-Konstruktor erstellt wird. Wenn das IFrame geladen ist, übergeben wir MessageChannel.port2 an das IFrame mittels window.postMessage zusammen mit einer Nachricht. Das Iframe empfängt die Nachricht und sendet eine Nachricht über den MessageChannel mit postMessage() zurück. Der handleMessage-Handler antwortet dann auf eine Nachricht, die vom IFrame zurückgesendet wird, indem er onmessage verwendet und sie in einen Absatz schreibt — MessageChannel.port1 wird abgehört, 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("Transferring message port", "*", [channel.port2]);
}
channel.port1.onmessage = handleMessage;
function handleMessage(e) {
para.innerHTML = e.data;
}
// in the iframe…
window.addEventListener("message", (event) => {
const messagePort = event.ports?.[0];
messagePort.postMessage("Hello from the iframe!");
});
Für ein vollständiges funktionierendes Beispiel sehen Sie sich unser grundlegendes Demonstrationsprojekt zur Kanalnachricht auf GitHub an (auch live ausführen).
Spezifikationen
| Spezifikation |
|---|
| HTML # dom-messageport-postmessage-dev |