Wbudowana funkcja wiadomości iframe Lookera

1. Zanim zaczniesz

Treści z Lookera powinny być umieszczone w elemencie iframe z umieszczaniem prywatnym lub umieszczeniem logowania jednokrotnego. W ramach tego ćwiczenia w programie będziemy wchodzić w interakcje z elementem iframe przez JavaScript, aby sprawić, że Twoja strona internetowa stanie się bardziej dynamiczna. 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 kodu frontendu służącego do zarządzania elementem iframe
  • Dostęp administratora do ustawień umieszczania w instancji Lookera

2. Przygotowania

Zanim zaczniesz korzystać z elementu iframe, musisz przygotować instancję iframe i instancję Lookera.

Dodawanie atrybutu id do elementu iframe

Musisz zweryfikować wiadomości pochodzące z elementu iframe. Aby to zrobić, zdefiniuj atrybut id w elemencie 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. Załóżmy, że adres URL strony internetowej to https://mywebsite.com/with/embed, a jej domena to https://mywebsite.com.

Jeśli używasz umieszczania prywatnego, w elemencie 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 korzystasz z umieszczania SSO, dodaj domenę jako parametr zapytania embed_domain do adresu URL umieszczania.

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

Aby umożliwić wysyłanie wiadomości, musisz dodać domenę umieszczonej witryny do listy dozwolonych w instancji Lookera.

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

W polu Zezwalaj na umieszczenie domeny wpisz domenę umieszczonej treści. Po wpisaniu domeny naciśnij klawisz Tab, aż domena zostanie wyświetlona w polu. Nie dodawaj ukośnika końcowego /.

Kliknij przycisk Aktualizuj.

3. Odsłuchiwanie komunikatów o zdarzeniach z elementu iframe

Twój element iframe z osadzoną treścią z Lookera wysyła wiadomości na swoją stronę internetową. Te wydarzenia zawierają aktualne informacje o umieszczonej treści Lookera, np. czy rozpoczęła się ładowanie umieszczonego panelu lub użytkownik wybrał w umieszczonej treści opcję Pobierz. Będziemy odbierać i analizować te zdarzenia.

Omówienie schematu obiektów zdarzenia

Schemat obiektu zdarzenia to:

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

Zdarzenie będzie zawsze miało właściwość type, która pozwala Ci określić, o jakie zdarzenie chodzi. Pozostałe właściwości zdarzeń 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 właściwość source wiadomości to element iframe z umieszczoną treścią z Lookera.
  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 hostująca może dynamicznie reagować na zdarzenia generowane przez treści z Lookera.

4. Wyślij wiadomość 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 komunikaty o działaniach mogą zmienić stan Twoich treści z Lookera, np. zaktualizować filtry w umieszczonym 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

Utwórz komunikat o działaniu w kodzie JavaScript swojej strony:

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

Obiekt action ma ten sam format co poprzedni obiekt event. Będzie ona zawsze zawierać właściwość type, a następnie właściwości powiązane z działaniami, które są zdefiniowane w przewodniku po działaniach. Komunikat działania musi być w formacie JSON.

Wyślij wiadomość o działaniu

W kodzie JavaScript strony wyślij działanie w formacie JSON do elementu iframe:

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() we właściwości contentWindow elementu iframe.

Teraz strona hostująca może dynamicznie zmieniać stan umieszczonych treści z Lookera.

5. Dodatkowe informacje

Gratulacje! Możesz teraz nasłuchiwać zdarzeń z umieszczonych w elemencie iframe treści Lookera i wysyłać do nich działania. Więcej informacji znajdziesz w tych materiałach: