Wbudowana funkcja wiadomości iframe Lookera

1. Zanim zaczniesz

Treści Lookera powinny być umieszczone w elemencie iframe z prywatnym umieszczaniem lub umieszczaniem SSO. W tym laboratorium kodowania będziemy wchodzić w interakcję z elementem iframe za pomocą JavaScriptu, aby zwiększyć dynamikę strony. Twoja strona internetowa będzie wysyłać wiadomości do osadzonej w ramce iframe treści Lookera i odbierać je z niej.

Wymagania wstępne

Czego się nauczysz

  • Przygotowywanie elementu iframe i instancji Lookera do interakcji z JavaScriptem
  • Jak nasłuchiwać zdarzeń z elementu iframe
  • Jak wysyłać wiadomości z działaniami do elementu iframe

Czego potrzebujesz

  • dostęp do kodu HTML i JavaScript interfejsu, który zarządza elementem iframe;
  • Dostęp do ustawień osadzania administratora w instancji Lookera

2. Przygotowania

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

Dodaj id atrybut do elementu iframe.

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

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

Dodaj domenę elementu do osadzenia do src atrybutu elementu iframe.

Określ domenę strony internetowej, na której znajduje się element iframe. Jeśli adres URL strony to https://mywebsite.com/with/embed, domena strony to https://mywebsite.com.

Jeśli używasz prywatnego umieszczania, w atrybucie 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 osadzonego adresu URL.

Dodaj domenę umieszczonego elementu do listy dozwolonych w instancji Lookera.

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

W sekcji Administracja instancji Lookera otwórz stronę Osadzanie. https://your_instance.looker.com/admin/embed

W polu Lista dozwolonych domen osadzania wpisz domenę osadzenia. Po wpisaniu naciśnij klawisz Tab, aby domena pojawiła się w polu. Nie dodawaj ukośnika na końcu /.

Kliknij przycisk Aktualizuj.

3. Nasłuchiwanie wiadomości o zdarzeniach z elementu iframe

Element iframe z osadzonymi treściami Lookera wysyła wiadomości do strony hosta. Te wiadomości zdarzeń zawierają aktualne informacje o osadzonych treściach Lookera, np. czy osadzony panel zaczął się wczytywać lub czy użytkownik wybrał opcję pobierania w osadzonych treściach. Odbierzmy i przeanalizujmy te zdarzenia.

Informacje o schemacie obiektu zdarzenia

Schemat obiektu zdarzenia jest następujący:

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

Zdarzenie zawsze ma właściwość type, która pozwala określić, o jakie zdarzenie chodzi. Wszystkie inne właściwości specyficzne dla zdarzenia są zdefiniowane w naszym dokumencie referencyjnym dotyczącym zdarzeń.

Odbieranie i parsowanie zdarzenia

Dodaj ten kod w miejscu, w którym JavaScript strony internetowej 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"); 
    }
  }
});

Ten fragment kodu wykonuje te czynności:

  1. Nasłuchuje zdarzenia "message" z obiektu window.
  2. Sprawdza, czy właściwość source wiadomości to element iframe z osadzonymi treściami 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ć odpowiednie działanie.

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

4. Wysyłanie wiadomości z działaniem do elementu iframe

Strona hostująca może też wysyłać wiadomości do osadzonej w ramce iframe treści Lookera. Te wiadomości action mogą zmieniać stan osadzonych treści Lookera, np. aktualizować filtry na osadzonym panelu. Utwórzmy wiadomość action, która poinformuje osadzony panel o konieczności uruchomienia zapytań i wysłania wiadomości do ramki iframe.

Tworzenie wiadomości z działaniem

Utwórz wiadomość z działaniem w JavaScript strony internetowej:

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

Obiekt action ma taki sam format jak poprzedni obiekt event. Zawsze będzie zawierać właściwość type, a także właściwości specyficzne dla działania, które są zdefiniowane w naszym odniesieniu do działań. Komunikat działania musi być w formacie JSON.

Wysyłanie wiadomości z działaniem

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 osadzonych treści Looker.

5. Dodatkowe informacje

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