Встроенный обмен сообщениями Looker iframe

1. Прежде чем начать

Содержимое Looker должно быть встроено в iframe с помощью частного внедрения или внедрения SSO . В этой кодовой лаборатории мы будем взаимодействовать с вашим iframe через JavaScript, чтобы сделать вашу веб-страницу более динамичной. Ваша веб-страница будет отправлять и получать сообщения из встроенного в iframe содержимого Looker.

Предварительные условия

Что вы узнаете

  • Как подготовить экземпляр iframe и Looker для взаимодействия с JavaScript
  • Как прослушивать события из вашего iframe
  • Как отправлять сообщения о действиях в iframe

Что вам понадобится

  • Доступ к HTML и JavaScript вашего внешнего кода, которые управляют iframe.
  • Доступ к административным настройкам встраивания в ваш экземпляр Looker

2. Подготовка

Вам необходимо подготовить экземпляр iframe и Looker, прежде чем вы сможете взаимодействовать с iframe.

Добавьте атрибут id в iframe

Вам нужно будет проверить сообщения, поступающие из iframe. Для этого определите атрибут id в iframe: 

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

Добавьте домен встраивания в атрибут src iframe.

Определите домен веб-страницы, на которой размещен iframe. Допустим, URL-адрес веб-страницы — https://mywebsite.com/with/embed тогда домен веб-страницы — https://mywebsite.com .

Если вы используете Private Embedding , в src iframe добавьте домен в качестве параметра запроса embed_domain :

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

Если вы используете SSO Embedding , добавьте домен в качестве параметра запроса embed_domain к URL-адресу внедрения .

Внесите в список разрешенных домен для внедрения в экземпляре Looker.

Наконец, вам необходимо внести домен встраивания в белый список в вашем экземпляре Looker, чтобы разрешить отправку сообщений.

Перейдите на страницу «Встроить» в разделе «Администратор » вашего экземпляра Looker. https://your_instance.looker.com/admin/embed

В поле «Разрешенный список встроенных доменов» введите домен встроенного домена. После ввода нажмите клавишу Tab , чтобы домен появился в поле. Не включайте косую черту / .

Нажмите кнопку «Обновить» .

3. Прослушивайте сообщения о событиях из iframe.

Ваш iframe со встроенным контентом Looker отправляет сообщения на свою хост-страницу. Эти сообщения о событиях содержат своевременную информацию о встроенном содержимом средства просмотра, например, о том, началась ли загрузка встроенной информационной панели или пользователь выбрал параметр «Загрузить» во внедренном содержимом. Давайте получим и разберем эти события .

Понимание схемы объекта события

Схема объекта события:

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

Событие всегда будет иметь свойство type , позволяющее определить, что это за событие. Все остальные свойства, специфичные для событий, определены в нашем справочнике по событиям .

Получить и проанализировать событие

Добавьте это туда, где JavaScript вашей веб-страницы инициализирует или управляет вашим iframe:

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

Фрагмент кода делает следующее:

  1. Прослушивает событие "message" от объекта window .
  2. Проверяет, что source свойством сообщения является iframe со встроенным содержимым Looker.
  3. Проверяет, что свойство origin сообщения является доменом вашего экземпляра Looker.
  4. JSON анализирует свойство data сообщения для доступа и анализа объекта события.
  5. Включает свойство type объекта события, чтобы определить, что это за событие, и действовать в соответствии с ним.

Теперь ваша хост-веб-страница может динамически реагировать на события, которые генерирует встроенный контент Looker!

4. Отправьте сообщение о действии в iframe.

Ваша хост-веб-страница также может отправлять сообщения во встроенный контент Looker вашего iframe. Эти сообщения о действиях могут изменить состояние встроенного контента Looker, например обновить фильтры на встроенной информационной панели. Давайте создадим сообщение о действии , которое сообщит вашей встроенной информационной панели выполнить запросы и отправить сообщение в ваш iframe.

Создайте сообщение о действиях

Создайте сообщение о действию внутри JavaScript вашей веб-страницы:

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

Объект action имеет тот же формат, что и предыдущий объект event . У него всегда будет свойство type , а затем свойства, специфичные для действия, которые определены в нашей ссылке на действие . Сообщение о действии должно быть в формате JSON.

Отправить сообщение о действии

Внутри JavaScript вашей веб-страницы отправьте действие в формате JSON в ваш iframe:

const iframeElement = document.getElementById("looker");
iframeElement.contentWindow.postMessage(actionJSONFormatted, 'https://instance_name.looker.com');
  1. Определите свой iframe, на который вы отправите свое действие.
  2. Вызовите метод postMessage() для свойства contentWindow iframe, чтобы отправить сообщение.

Теперь ваша хост-страница может динамически изменять состояние встроенного контента Looker!

5. Дополнительная информация

Поздравляем! Теперь вы можете прослушивать события и отправлять действия со встроенным контентом Looker вашего iframe. Посетите эти ресурсы для получения дополнительной информации: