1. Hinweis
Looker-Inhalte sollten in einen Iframe eingebettet sein, entweder mit privater Einbettung oder SSO-Einbettung. In diesem Codelab interagieren wir über JavaScript mit Ihrem iFrame, damit Ihre Webseite dynamischer wird. Ihre Webseite sendet Nachrichten an den eingebetteten Looker-Inhalt des Iframes und empfängt Nachrichten von ihm.
Voraussetzungen
- Eine laufende Looker-Instanz
- Looker-Dashboard privat eingebettet oder SSO in einen iFrame einbetten
- Die Methode window.postMessage()
Aufgaben in diesem Lab
- iFrame und Looker-Instanz für JavaScript-Interaktionen vorbereiten
- Ereignisse über den iFrame erfassen
- Aktionsnachrichten an deinen Iframe senden
Voraussetzungen
- Zugriff auf den HTML- und JavaScript-Code Ihres Front-End-Codes, der den iFrame verwaltet
- Zugriff auf die Administrator-Einbettungseinstellungen in Ihrer Looker-Instanz
2. Vorbereitungen
Sie müssen den iFrame und die Looker-Instanz vorbereiten, bevor Sie mit dem iFrame interagieren können.
Dem iFrame ein id
-Attribut hinzufügen
Sie müssen die Nachrichten validieren, die vom Iframe stammen. Definieren Sie dazu ein id
-Attribut im iFrame:
<iframe
id="looker"
src="https://instance_name.looker.com/embed/dashboards/1"
>
</iframe>
Füge die Domain des Embeds dem src
-Attribut des iframes hinzu.
Ermitteln Sie die Domain der Webseite, auf der der iFrame gehostet wird. Angenommen, die URL der Webseite lautet https://mywebsite.com/with/embed
, dann ist die Domain der Webseite https://mywebsite.com
.
Wenn du private Einbettung verwendest, füge die Domain in der src des iFrames als embed_domain
-Abfrageparameter hinzu:
<iframe
id="looker"
src="https://instance_name.looker.com/embed/dashboards/1?embed_domain=https://mywebsite.com"
>
</iframe>
Wenn du SSO-Embedding verwendest, füge die Domain als embed_domain
-Abfrageparameter zur Embed-URL hinzu.
Domain des Embeds in der Looker-Instanz auf die Zulassungsliste setzen
Schließlich müssen Sie die Domain des Embeds in Ihrer Looker-Instanz auf die Zulassungsliste setzen, damit Nachrichten gesendet werden können.
Rufen Sie in Ihrer Looker-Instanz die Seite Einbetten im Bereich Verwaltung auf. https://your_instance.looker.com/admin/embed
Geben Sie in das Feld Eingebettete Domain-Zulassungsliste die Domain der Einbettung ein. Drücken Sie danach die Tabulatortaste, damit die Domain in einem Feld angezeigt wird. Fügen Sie keinen abschließenden Schrägstrich /
hinzu.
Wählen Sie die Schaltfläche Aktualisieren aus.
3. Ereignisnachrichten vom iFrame empfangen
Ihr iFrame mit eingebetteten Looker-Inhalten sendet Nachrichten an die Host-Webseite. Diese Ereignis-Nachrichten enthalten aktuelle Informationen über den eingebetteten Looker-Inhalt, z. B. ob das eingebettete Dashboard mit dem Laden begonnen hat oder der Benutzer die Option „Herunterladen“ innerhalb des eingebetteten Inhalts ausgewählt hat. Lassen Sie uns diese Ereignisse empfangen und analysieren.
Schema der Ereignisobjekte
Das Schema des Ereignisobjekts lautet:
{
type: "...",
eventSpecificProperty1: ...,
eventSpecificProperty2: ...,
...
}
Das Ereignis hat immer eine type
-Property, anhand derer Sie feststellen können, um welches Ereignis es sich handelt. Alle anderen ereignisspezifischen Properties sind in unserer Referenz zu Ereignissen definiert.
Ereignis empfangen und analysieren
Fügen Sie dies an der Stelle ein, an der der JavaScript-Code Ihrer Webseite initialisiert oder Ihr iFrame verwaltet wird:
window.addEventListener("message", function(message) {
const iframeElement = document.getElementById("looker");
if (message.source === iframeElement.contentWindow) {
if (message.origin === "https://instance_name.looker.com") {
const event = JSON.parse(message.data);
switch (event.type):
case "dashboard:run:start":
console.log("The embedded dashboard has started loading");
}
}
});
Das Code-Snippet führt Folgendes aus:
- Hört auf das
"message"
-Ereignis vomwindow
-Objekt. - Prüft, ob die
source
-Eigenschaft der Nachricht der iFrame mit den eingebetteten Looker-Inhalten ist. - Prüfen Sie, ob das Attribut
origin
der Nachricht die Domain Ihrer Looker-Instanz ist. - JSON parst das
data
-Attribut der Nachricht, um auf das Ereignisobjekt zuzugreifen und es zu parsen. - Aktiviert die
type
-Eigenschaft des Ereignisobjekts, um zu bestimmen, um welches Ereignis es sich handelt, und entsprechend zu reagieren.
Ihre Host-Webseite kann jetzt dynamisch auf Ereignisse reagieren, die von Ihren eingebetteten Looker-Inhalten gesendet werden.
4. Aktionsnachricht an den iFrame senden
Ihre Host-Webseite kann auch Nachrichten an die eingebetteten Looker-Inhalte Ihres iFrames senden. Mit diesen Aktionen können Sie den Status Ihrer eingebetteten Looker-Inhalte ändern, z. B. die Filter in Ihrem eingebetteten Dashboard aktualisieren. Erstellen wir eine Aktion, die das eingebettete Dashboard auffordert, seine Abfragen auszuführen und die Nachricht an Ihren Iframe zu senden.
Aktionsnachricht erstellen
Erstellen Sie im JavaScript-Code Ihrer Webseite eine Aktionsnachricht:
const action = { type: "dashboard:run" };
const actionJSONFormatted = JSON.stringify(action);
Das action
-Objekt folgt demselben Format wie das vorherige event
-Objekt. Sie hat immer das Attribut type
und dann aktionsspezifische Eigenschaften, die in unserer Aktionsreferenz definiert sind. Die Aktionsnachricht muss im JSON-Format vorliegen.
Aktionsnachricht senden
Senden Sie im JavaScript-Code Ihrer Webseite die Aktion im JSON-Format an Ihren iFrame:
const iframeElement = document.getElementById("looker");
iframeElement.contentWindow.postMessage(actionJSONFormatted, 'https://instance_name.looker.com');
- Legen Sie den Iframe fest, an den die Aktion gesendet werden soll.
- Rufe die Methode
postMessage()
auf dem AttributcontentWindow
des Iframes auf, um die Nachricht zu senden.
Jetzt kann Ihre Host-Webseite den Status Ihrer eingebetteten Looker-Inhalte dynamisch ändern!
5. Weitere Informationen
Glückwunsch! Sie können jetzt Ereignisse von den eingebetteten Looker-Inhalten Ihres Iframes abhören und Aktionen an diese senden. Weitere Informationen findest du in diesen Ressourcen:
- Ereignisreferenz für alle verfügbaren Ereignisse und ihre Eigenschaften
- Aktionsreferenz für alle verfügbaren Aktionen und ihre Eigenschaften
- Best Practices für die Sicherheit zur Einbettung Ihrer Looker-Inhalte