JavaScript/Window/postMessage

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

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.

  • Chrome
  • Firefox
  • IE 10
  • Opera
  • Safari

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, was mit JavaScript nicht möglich ist. Es gibt vier vordefinierte Objekttypen, die diese Schnittstelle unterstützen: MessagePort, ArrayBuffer, ImageBitmap und OffscreenCanvas.

Verwendung[Bearbeiten]

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</<code> Event. Das Eventobjekt, das dem Eventhandler übergeben wird, besitzt die von <code>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[Bearbeiten]

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

ToDo (weitere ToDos)

Dieser Abschnitt muss erstellt werden

Weblinks[Bearbeiten]