Eingebettete Looker-iFrame-Mitteilungen

1. Hinweis

Looker-Inhalte sollten in einem iFrame mit privater Einbettung oder SSO-Einbettung eingebettet sein. In diesem Codelab interagieren wir über JavaScript mit Ihrem iFrame, um Ihre Webseite dynamischer zu gestalten. Ihre Webseite sendet Nachrichten an den eingebetteten Looker-Inhalt des iFrames und empfängt Nachrichten von ihm.

Voraussetzungen

Lerninhalte

  • iFrame und Looker-Instanz für die JavaScript-Interaktion vorbereiten
  • Ereignisse aus Ihrem iFrame abrufen
  • Aktionsnachrichten an Ihr iFrame senden

Voraussetzungen

  • Zugriff auf das HTML und JavaScript Ihres Frontend-Codes, mit dem der iFrame verwaltet wird
  • Zugriff auf die Einstellungen für das Einbetten von Administratoren in Ihrer Looker-Instanz

2. Vorbereitungen

Sie müssen Ihr iFrame und Ihre Looker-Instanz vorbereiten, bevor Sie mit dem iFrame interagieren können.

Fügen Sie dem iFrame ein id-Attribut hinzu.

Sie müssen die Nachrichten, die vom iFrame stammen, validieren. Dazu definieren Sie ein id-Attribut für das iFrame:

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

Fügen Sie die Domain des eingebetteten Inhalts dem src-Attribut 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, ist die Domain der Webseite https://mywebsite.com.

Wenn Sie Private Embedding verwenden, fügen Sie der src des iFrames die Domain 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 SSO Embedding verwenden, fügen Sie die Domain als embed_domain-Abfrageparameter in die Einbettungs-URL ein.

Domain des eingebetteten Inhalts in der Looker-Instanz auf die Zulassungsliste setzen

Schließlich müssen Sie die Domain des eingebetteten Elements in Ihrer Looker-Instanz auf die Allowlist setzen, damit Nachrichten gesendet werden können.

Rufen Sie in Ihrer Looker-Instanz im Bereich Admin die Seite Einbetten auf. https://your_instance.looker.com/admin/embed

Geben Sie im Feld Embedded Domain Allowlist (Zulassungsliste für eingebettete Domains) die Domain der Einbettung ein. Drücken Sie nach der Eingabe die Tabulatortaste, damit die Domain in einem Feld angezeigt wird. Fügen Sie keinen abschließenden Schrägstrich / ein.

Wählen Sie die Schaltfläche Aktualisieren aus.

3. Auf Ereignismeldungen vom iFrame warten

Ihr iFrame mit eingebetteten Looker-Inhalten sendet Nachrichten an die Host-Webseite. Diese Ereignis-Nachrichten enthalten aktuelle Informationen zu den eingebetteten Looker-Inhalten, z. B. ob das eingebettete Dashboard mit dem Laden begonnen hat oder ob der Nutzer die Option „Herunterladen“ in den eingebetteten Inhalten ausgewählt hat. Wir empfangen und parsen diese Ereignisse.

Schema für Ereignisobjekte

Das Schema des Ereignisobjekts ist:

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

Das Ereignis hat immer das Attribut type, mit dem Sie feststellen können, um welches Ereignis es sich handelt. Alle anderen ereignisspezifischen Attribute sind in unserer Ereignisreferenz definiert.

Ereignis empfangen und parsen

Fügen Sie diesen Code an der Stelle ein, an der das JavaScript Ihrer Webseite Ihren iFrame initialisiert oder verwaltet:

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 des window-Objekts.
  2. Prüft, ob die source-Eigenschaft der Nachricht der iFrame mit den eingebetteten Looker-Inhalten ist.
  3. Prüft, ob die origin-Property der Nachricht die Domain Ihrer Looker-Instanz ist.
  4. JSON parst das Attribut data der Nachricht, um auf das Ereignisobjekt zuzugreifen und es zu parsen.
  5. Die type-Eigenschaft des Ereignisobjekts wird verwendet, um zu ermitteln, um welche Art von Ereignis es sich handelt, und entsprechend zu reagieren.

Ihre Host-Webseite kann jetzt dynamisch auf Ereignisse reagieren, die von Ihren eingebetteten Looker-Inhalten ausgegeben werden.

4. Aktionsnachricht an das iFrame senden

Ihre Host-Webseite kann auch Nachrichten an die eingebetteten Looker-Inhalte Ihres iFrames senden. Mit diesen Aktionsmeldungen kann der Status Ihrer eingebetteten Looker-Inhalte geändert werden, z. B. durch Aktualisieren der Filter in Ihrem eingebetteten Dashboard. Erstellen wir eine Aktionsnachricht, die Ihrem eingebetteten Dashboard mitteilt, dass es seine Abfragen ausführen und die Nachricht an Ihren iFrame senden soll.

Aktionsmitteilung erstellen

Erstellen Sie eine Aktionsmeldung im JavaScript Ihrer Webseite:

const action = { type: "dashboard:run" };
const actionJSONFormatted = JSON.stringify(action);

Das action-Objekt hat dasselbe Format wie das vorherige event-Objekt. Es hat immer ein type-Attribut und dann aktionsspezifische Attribute, die in unserer Aktionsreferenz definiert sind. Die Aktionsnachricht muss im JSON-Format vorliegen.

Aktionsnachricht senden

Senden Sie die im JSON-Format formatierte Aktion über das JavaScript Ihrer Webseite an Ihren iFrame:

const iframeElement = document.getElementById("looker");
iframeElement.contentWindow.postMessage(actionJSONFormatted, 'https://instance_name.looker.com');
  1. Bestimmen Sie den Iframe, an den Sie die Aktion senden.
  2. Rufen Sie die Methode postMessage() für das Attribut contentWindow des iFrames auf, um die Nachricht zu senden.

Jetzt kann der Status Ihrer eingebetteten Looker-Inhalte dynamisch auf der Host-Webseite geändert werden.

5. Weitere Informationen

Glückwunsch! Sie können jetzt Ereignisse aus dem eingebetteten Looker-Inhalt Ihres iFrames abhören und Aktionen an ihn senden. Weitere Informationen finden Sie in den folgenden Ressourcen: