MessagePort: postMessage() Methode

message

Die Nachricht, die Sie über den Kanal senden möchten. Diese kann jeden grundlegenden Datentyp haben. Mehrere Datenobjekte können als Array gesendet werden.

transfer Optional

Ein optionales Array von übertragbaren Objekten, deren Besitz übertragen werden soll. Der Besitz dieser Objekte wird an die Empfängerseite übergeben und sie sind auf der sendenden Seite nicht mehr nutzbar. Diese übertragbaren Objekte sollten an die Nachricht angehängt werden; andernfalls würden sie verschoben, aber auf der empfangenden Seite nicht tatsächlich zugänglich sein.

options Optional

Ein optionales Objekt, das die folgenden Eigenschaften enthält:

transfer Optional

Hat die gleiche Bedeutung wie der transfer-Parameter.

Keiner (undefined).

Im folgenden Codeblock sehen Sie, wie ein neuer Kanal mithilfe des MessageChannel()-Konstruktors erstellt wird. Wenn das IFrame geladen ist, übergeben wir MessageChannel.port2 an das IFrame mit window.postMessage zusammen mit einer Nachricht. Das IFrame empfängt die Nachricht und sendet eine Nachricht auf dem 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 setzt — MessageChannel.port1 wird überwacht, 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, false);

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ändig funktionsfähiges Beispiel, siehe unsere grundlegende Demo zur Kanalkommunikation auf GitHub (live ausführen).

• Verwendung der Kanalkommunikation