Wbudowana funkcja wiadomości iframe Lookera

1. Zanim zaczniesz

Treści Lookera powinny być umieszczone w iframe za pomocą prywatnego umieszczenia lub umieszczania SSO. W tym ćwiczeniu będziemy pracować z elementem iframe za pomocą kodu JavaScript, aby zwiększyć dynamikę Twojej strony. Twoja strona internetowa będzie wysyłać wiadomości i odbierać wiadomości z umieszczonej w elemencie iframe treści Lookera.

Wymagania wstępne

Czego się nauczysz

  • Jak przygotować instancję iframe i instancję Lookera do interakcji z JavaScriptem
  • Jak nasłuchiwać zdarzeń z elementu iframe
  • Wysyłanie wiadomości o działaniach do elementu iframe

Czego potrzebujesz

  • dostęp do kodu HTML i JavaScript po stronie front-end, który zarządza iframe;
  • Dostęp administratora do ustawień umieszczania w instancji Lookera

2. Przygotowania

Zanim będzie można korzystać z elementu iframe, musisz przygotować element iframe i instancję Lookera.

dodać atrybut id do elementu iframe;

Musisz zweryfikować wiadomości pochodzące z ramki iframe. Aby to zrobić, zdefiniuj atrybut id w ramce iframe:

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

Dodaj domenę umieszczonej do atrybutu elementu iframe src

Określ domenę strony internetowej zawierającej element iframe. Jeśli adres URL strony internetowej to https://mywebsite.com/with/embed, to domena tej strony to https://mywebsite.com.

Jeśli korzystasz z osadzania prywatnego, w src elementu iframe dodaj domenę jako parametr zapytania embed_domain:

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

Jeśli używasz osadzania logowania jednokrotnego, dodaj domenę jako parametr zapytania embed_domain do adresu URL do osadzania.

Umieść domenę umieszczonej na liście dozwolonych w instancji Lookera

Na koniec musisz dodać domenę wtyczki do listy dozwolonych w swojej instancji Lookera, aby umożliwić wysyłanie wiadomości.

W sekcji Administracja instancji Lookera otwórz stronę Embed (Umieść). https://your_instance.looker.com/admin/embed

W polu Embedded Domains (Zezwalaj na umieszczenie domeny) wpisz domenę umieszczonej treści. Po wpisaniu adresu naciśnij klawisz Tab, aby dodać domenę w polu. Nie dodawaj ukośnika na końcu. /

Kliknij przycisk Aktualizuj.

3. Nasłuchiwanie komunikatów o zdarzeniach z ramki iframe

Twój element iframe z osadzoną treścią z Lookera wysyła wiadomości na swoją stronę internetową. Te wiadomości zawierają aktualne informacje o zawartości w przeglądarce Looker, np. o tym, że zaczęło się wczytywanie wbudowanej tablicy lub użytkownik wybrał opcję Pobierz w ramach wbudowanej treści. Odbieramy i analizujemy te zdarzenia.

Omówienie schematu obiektów zdarzenia

Schemat obiektu zdarzenia:

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

Zdarzenie to zawsze będzie miało właściwość type, która umożliwia określenie, co to za zdarzenie. Wszystkie pozostałe właściwości specyficzne dla zdarzenia są zdefiniowane w dokumentacji zdarzeń.

Odbieranie i analiza zdarzenia

Dodaj ten kod do miejsca, w którym JavaScript Twojej strony inicjuje element iframe lub nim zarządza:

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"); 
    }
  }
});

Fragment kodu wykonuje następujące działania:

  1. Nasłuchuje zdarzenia "message" z obiektu window.
  2. Sprawdza, czy parametr source wiadomości to element iframe z osadzonymi treściami Looker.
  3. Sprawdza, czy właściwość origin wiadomości jest domeną instancji Lookera.
  4. JSON analizuje właściwość data wiadomości, aby uzyskać dostęp do obiektu zdarzenia i go przeanalizować.
  5. Przełącza właściwość type obiektu zdarzenia, aby określić, jakie to zdarzenie, i wykonać na nim działania.

Teraz strona hosta może dynamicznie reagować na zdarzenia emitowane przez treści wbudowanego Lookera.

4. Wysyłanie komunikatu do działania do elementu iframe

Strona internetowa hostująca może też wysyłać wiadomości do treści Lookera umieszczonej w elemencie iframe. Te działania mogą zmienić stan osadzonych treści Looker, np. zaktualizować filtry w osadzonym panelu. Utwórz wiadomość action (działanie), która informuje umieszczony panel, że ma uruchamiać zapytania i wysyłać tę wiadomość do elementu iframe.

Tworzenie wiadomości zachęcającej do działania

Aby utworzyć wiadomość z działaniem w JavaScriptie strony internetowej:

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

Obiekt action ma ten sam format co poprzedni obiekt event. Zawsze zawiera ona właściwość type, a następnie właściwości specyficzne dla działania, które są zdefiniowane w naszym pliku referencyjnym działań. Komunikat działania musi być w formacie JSON.

Wysyłanie wiadomości z działaniem

W kodzie JavaScript witryny prześlij do elementu iframe działanie w formacie JSON:

const iframeElement = document.getElementById("looker");
iframeElement.contentWindow.postMessage(actionJSONFormatted, 'https://instance_name.looker.com');
  1. Określ element iframe, do którego chcesz wysłać działanie.
  2. Aby wysłać wiadomość, wywołaj metodę postMessage() w komponencie iframe o nazwie contentWindow.

Teraz strona hosta może dynamicznie zmieniać stan osadzonych treści Lookera.

5. Dodatkowe informacje

Gratulacje! Możesz teraz odbierać zdarzenia z osadzonych treści Lookera w ramce iframe i wysyłać do nich działania. Więcej informacji znajdziesz w tych materiałach: