JavaScript/Window/postMessage

Die Methode postMessage() sendet eine Nachricht an das Window-, Worker- oder MessagePort-Objekt, auf dem sie aufgerufen wird. Die Kommunikation ist asynchron, und auf Wunsch auch Origin-übergreifend, so dass sie verwendet werden kann, um zwischen Scripts aus verschiedenen Quellen zu kommunizieren.

Details: caniuse.com

Syntax 1 (für Window, Worker und MessagePort)

Window.postMessage(message, options);

Syntax 2 (nur für Window)

Window.postMessage(message, targetOrigin, transfer);

message

ein Javascript-Objekt, das als Nachricht versendet wird. Dieses Objekt wird beim Sender serialisiert und beim Empfänger deserialisiert, das bedeutet unter anderem, dass beim Empfänger eine Kopie der Nachricht eintrifft und nicht das versendete Objekt selbst.

options

Optionen für den Versand. Es handelt sich um ein Objekt mit den Eigenschaften targetOrigin und transfer, die den Parametern der zweiten Syntax entsprechen.

targetOrigin

Origin, den das Empfangsfenster haben soll. Diese Option wird nur beim postMessage an ein Window beachtet. Per Default hat targetOrigin den Wert "/", das bedeutet, dass ein Nachrichtenversand nur an Dokumente möglich ist, die den gleichen Origin haben wie der Absender. Sie können hier eine beliebige URL angeben; ein Nachrichtenversand findet nur statt, wenn Origin von Sender und Empfänger übereinstimmen. Der Versand an einen beliebigen Origin ist durch Angabe von "*" möglich, aber aus Sicherheitsgründen nicht empfohlen.

transfer

Ein Array aus Objekten, die in den Besitz des Empfängerfensters übergehen sollen. Sie sind auf der Senderseite nicht mehr verwendbar. Solche Objekte müssen die Transferable Schnittstelle implementieren. Das können Sie mit eigenen Objekten in JavaScript nicht tun, aber es gibt neun vordefinierte Objekttypen, die diese Schnittstelle unterstützen:

• ArrayBuffer
• MessagePort
• ReadableStream, WritableStream, TransformStream
• AudioData, ImageBitmap, VideoFrame
• OffscreenCanvas.

Verwendung

Wenn Sie auf einem Window, Worker oder MessagePort die postMessage Methode aufrufen (und die Origin-Regeln es nicht verhindern), so wird auf diesem Objekt das message Event ausgelöst. Auf dieses Event kann sich ein Script auf der Empfängerseite registrieren und erhält dann ein message Event. Das Eventobjekt, das dem Eventhandler übergeben wird, besitzt die von Event abgeleitete Schnittstelle MessageEvent und enthält die folgenden besonderen Eigenschaften:

• data: Die von postMessage versendete, deserialisierte Message
• origin: Der Origin (Protokoll, Hostname und Port) des Absenders, so dass der Empfänger prüfen kann, ob er eine Nachricht von einem bekannten Sender erhält, oder Nachrichten je nach Sender unterschiedlich interpretieren kann. Die Origin-Angabe ist ein String im Format einer URL, beispielsweise https://example.org:8080.
• source: Eine Referenz auf den Absender der Nachricht. Antworten auf die Nachricht müssen - ebenfalls mit postMessage - an dieses Objekt geschickt werden.

Beachten Sie: Es gibt einige Objektschnittstellen, die nicht in allen JavaScript-Ausführungsumgebungen verfügbar sind. Wenn Sie in data ein Objekt übertragen möchten, das sich beim Empfänger nicht deserialisieren lässt, weil es solche Objekte dort einfach nicht gibt, erhält der Empfänger an Stelle des message Events ein messageerror Event. Dieses enthält origin und source, aber keine Daten.

Anwendungsbeispiel

Ein einfaches Beispiel findet sich auf der Seite für Web Worker.

Eine weitere Anwendung besteht darin, mehrere Fenster (oder Frames) miteinander kommunizieren zu lassen. Die einfache Methode einer solchen Kommunikation besteht im direkten Zugriff auf das DOM des anderen Fensters, das ist aber nur dann möglich, wenn die beteiligten Instanzen den gleichen Origin aufweisen. In einer gemischten Umgebung geht das nicht. Typischerweise gibt es in diesem Szenario ein Hauptfenster, von dem aus mehrere andere Fenster geöffnet werden oder das iframes enthält. Ein Frameset mit Frames, die aus unterschiedlichen Origins geladen werden, wäre zwar obsolete Technik, aber auch ein Anwendungsfall.

Das Hauptfenster hat alle untergeordneten Fenster geöffnet und kennt sie deshalb. Im Gegenzug kennen die untergeordneten Fenster nur das Hauptfenster, nicht aber die übrigen vom Hauptfenster geöffneten übrigen Fenster.

Szenario 1: Ein Hauptfenster öffnet neue Fenster (oder Tabs) mit window.open

Das Hauptfenster verwendet den von window.open zurückgegebenen WindowProxy, um Nachrichten zu senden. Das neue Fenster sendet seine Nachrichten an window.opener

Szenario 2: Ein Hauptfenster enthält einen iframe

Das Hauptfenster verwendet das HTMLIFrameElement im eigenen DOM und verwendet dessen Eigenschaft contentWindow, um Nachrichten zu senden. Das Script im iframe sendet seine Nachrichten an window.parent

Szenario 3: Ein Frameset enthält Frames

Das Frameset verwendet die frames-Collection, um den gewünschten Subframe zu adressieren, und sendet seine Nachrichten dorthin. Der Subframe sendet an window.parent.

ToDo (weitere ToDos)

Beispiel aufbauen

Weblinks

• W3C: Posting Messages
• MDN: Window.postMessage