Eingebettete Looker-iFrame-Mitteilungen

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

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:

  1. Hört auf das "message"-Ereignis vom window-Objekt.
  2. Prüft, ob die source-Eigenschaft der Nachricht der iFrame mit den eingebetteten Looker-Inhalten ist.
  3. Prüfen Sie, ob das Attribut origin der Nachricht die Domain Ihrer Looker-Instanz ist.
  4. JSON parst das data-Attribut der Nachricht, um auf das Ereignisobjekt zuzugreifen und es zu parsen.
  5. 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');
  1. Legen Sie den Iframe fest, an den die Aktion gesendet werden soll.
  2. Rufe die Methode postMessage() auf dem Attribut contentWindow 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: