Eingebettete Looker-iFrame-Mitteilungen

1. Hinweis

Looker-Inhalte sollten entweder mit privater Einbettung oder SSO-Einbettung in einen iFrame eingebettet sein. 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 diesen.

Voraussetzungen

Aufgaben in diesem Lab

  • iFrame- und Looker-Instanz für die JavaScript-Interaktion vorbereiten
  • Auf Ereignisse aus Ihrem iFrame warten
  • Aktionsnachrichten an den 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 gesendet werden. Definieren Sie dazu ein id-Attribut im iFrame:

<iframe 
    id="looker"
    src="https://instance_name.looker.com/embed/dashboards/1"
>
</iframe>

Fügen Sie die Domain der Einbettung zum Attribut src des iFrames hinzu.

Ermitteln Sie die Domain der Webseite, auf der der iFrame gehostet wird. Wenn die URL der Webseite https://mywebsite.com/with/embed lautet, lautet 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 Sie die SSO-Einbettung verwenden, fügen Sie die Domain als embed_domain-Abfrageparameter in die Einbettungs-URL ein.

Domain der Einbettung in der Looker-Instanz auf die Zulassungsliste setzen

Schließlich müssen Sie die Domain der Einbettung in Ihrer Looker-Instanz auf die Zulassungsliste setzen, damit Nachrichten gesendet werden können.

Gehen Sie im Bereich Admin Ihrer Looker-Instanz zur Seite Einbetten. https://your_instance.looker.com/admin/embed

Geben Sie in das Feld Eingebettete Domain-Zulassungsliste die Domain der Einbettung ein. Drücken Sie nach der Eingabe die Tabulatortaste, sodass die Domain in einem Feld angezeigt wird. Fügen Sie keinen Schrägstrich (/) ein.

Wählen Sie die Schaltfläche Aktualisieren aus.

3. Auf Ereignismeldungen aus dem iFrame warten

Ihr iFrame mit eingebetteten Looker-Inhalten sendet Nachrichten an die zugehörige 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 parsen.

Schema der Ereignisobjekte

Das Schema des Ereignisobjekts lautet:

{
  type: "...",
  eventSpecificProperty1: ...,
  eventSpecificProperty2: ...,
  ...
}

Das Ereignis hat immer eine type-Eigenschaft, mit der Sie festlegen können, um welches Ereignis es sich handelt. Alle anderen ereignisspezifischen Eigenschaften sind in unserer Ereignisreferenz definiert.

Ereignis empfangen und parsen

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. Wartet auf das "message"-Ereignis aus dem window-Objekt.
  2. Prüft, ob das Attribut source der Nachricht der iFrame mit dem eingebetteten Looker-Inhalt 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. Schaltet die Eigenschaft type des Ereignisobjekts ein, um zu bestimmen, um welches Ereignis es sich handelt, und um darauf zu reagieren.

Jetzt kann Ihre Host-Webseite dynamisch auf Ereignisse reagieren, die Ihre eingebetteten Looker-Inhalte ausgeben!

4. Aktionsnachricht an den iFrame senden

Ihre Host-Webseite kann auch Nachrichten an den eingebetteten Looker-Inhalt Ihres iFrames senden. Diese Aktionsnachrichten können den Status Ihrer eingebetteten Looker-Inhalte ändern und z. B. die Filter in Ihrem eingebetteten Dashboard aktualisieren. Erstellen Sie nun eine action-Nachricht, die das eingebettete Dashboard anweist, 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 hat dasselbe 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. Bestimmen Sie den iFrame, an den die Aktion gesendet werden soll.
  2. Rufen Sie zum Senden der Nachricht die Methode postMessage() in der Eigenschaft contentWindow des iFrames auf.

Jetzt kann Ihre Host-Webseite den Status Ihrer eingebetteten Looker-Inhalte dynamisch ändern!

5. Weitere Informationen

Glückwunsch! Sie können jetzt auf Ereignisse von den eingebetteten Looker-Inhalten Ihres iFrames warten und Aktionen an diese senden. Weitere Informationen findest du in diesen Ressourcen: