Send PostMessage-Aktion
Die Send PostMessage-Aktion sendet eine Nachricht von Ihrem laufenden Labvanced-Experiment an ein externes Ziel, wie z.B. eine übergeordnete Webseite, eine benutzerdefinierte Anwendung oder einen eingebetteten Frame, unter Verwendung der postMessage-API des Browsers.
Inhaltsverzeichnis
Überblick
Diese Aktion ist im Aktionsauswahlmenü unter API-Aktionen aufgeführt.
Häufige Anwendungsfälle
- Benachrichtigung einer übergeordneten Anwendung (z.B. ein LMS oder institutionelles Portal), wenn ein Teilnehmer einen bestimmten Punkt erreicht oder eine Aufgabe abgeschlossen hat.
- Übertragung eines Variablenwertes, wie z.B. eines Punktestands, einer Antwort oder eines Bedingungslabels, an ein externes System in Echtzeit.
Die zweiseitige Einrichtung
Die Verwendung von postMessage zwischen Labvanced und einer externen Seite (wie einem iFrame oder einer übergeordneten Anwendung) ist ein zweiseitiger Prozess. Labvanced verwaltet eine Seite: Diese Aktion sendet die Nachricht. Die andere Seite ist die externe Seite, die programmiert werden muss, um sie zu empfangen.
Die postMessage-API ist eine Standardfunktion des Browsers. Die externe Seite benötigt einen window.addEventListener('message', handler)-Listener, um Nachrichten von Labvanced zu empfangen. Dieser Listener sollte auch nach Domain filtern und überprüfen, dass der Nachrichtenursprung Labvanced ist, damit er nur auf Nachrichten von einer vertrauenswürdigen Quelle reagiert. Sie oder Ihr Entwickler müssen diesen Code schreiben. Ein KI-Coding-Tool kann helfen, es schnell zu generieren, falls erforderlich.
Wie es funktioniert
Wenn diese Aktion ausgelöst wird, sendet Labvanced eine postMessage an das Ziel-Fenster. Die Nachricht wird an jede Seite unter der Ziel-Domain geliefert, die mit einem window.addEventListener('message', handler) lauscht.
Die Nachrichtennutzlast enthält den Wert zum Senden. Wenn ein Schlüssel festgelegt ist, wird er in die Nutzlast aufgenommen, damit die empfangende Seite den Nachrichtentyp identifizieren und entsprechend verarbeiten kann.
Die externe Seite ist dafür verantwortlich, die Nachricht zu verarbeiten. Ihr Listener sollte den Nachrichtenursprung überprüfen, bevor er darauf reagiert, um sicherzustellen, dass nur auf Nachrichten reagiert wird, die von Labvanced gesendet wurden.
Nach der Auswahl von Send PostMessage erscheint die folgende Konfiguration:
Aktionsoptionen
| Menüpunkt | Optionen der Send PostMessage-Aktion |
|---|---|
Ziel-Domain | Gibt den Zielursprung an, der die Nachricht erhalten soll. Der Standardwert ist *, was an jeden Ursprung sendet. Ersetzen Sie * durch die vollständige Ziel-URL (z.B. https://yoursite.com), wenn das Ziel bekannt ist. Es wird empfohlen, die genaue Domain aus Sicherheitsgründen anzugeben. |
Schlüssel | Fügt der ausgehenden Nachricht einen Identifikationsschlüssel hinzu. Dadurch wird die Nachrichtennutzlast als Schlüssel: wert strukturiert, was die empfangende Seite verwenden kann, um verschiedene Arten von Nachrichten zu unterscheiden. Lassen Sie das Feld leer, wenn kein Schlüssel benötigt wird. |
Wert zum Senden | Definiert die Daten, die in der ausgehenden Nachricht enthalten sein sollen. Klicken Sie auf das Bearbeitungssymbol, um das Wert-Auswahlmenü zu öffnen und anzugeben, was gesendet werden soll: ein konstanter Wert, eine Labvanced-Variable oder ein Ausdruck. |
Hinweis: Das System, das die Nachricht empfängt (die übergeordnete Seite oder externe Anwendung), muss einen window.addEventListener('message', ...)-Listener implementieren, um die eingehende postMessage von Labvanced zu verarbeiten.
Weitere Lektüre und offene Materialien
- PostMessage Received Trigger: der gekoppelte Trigger zum Anhören eingehender postMessages von externen Quellen.
- Wert-Auswahlmenü: wie man definiert, welchen Wert man senden möchte, unter Verwendung von Variablen, Konstanten oder Ausdrücken.
- Labvanced Web Bridge Extension: Kontext dazu, wie postMessage für die Kommunikation mit eingebetteten externen Webseiten verwendet wird.
- Events Overview: eine vollständige Einführung in das Trigger-und-Aktions-Logiksystem in Labvanced.