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

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

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

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

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

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

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

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

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

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

Добавьте атрибут 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 , добавьте домен в качестве параметра запроса embed_domain к URL-адресу встраивания .

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

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

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

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

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

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

Ваш iframe со встроенным контентом Looker отправляет сообщения на свою веб-страницу-хост. Эти сообщения о событиях содержат актуальную информацию о встроенном контенте 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.

Ваша веб-страница также может отправлять сообщения встроенному в ваш iframe контенту Looker. Эти сообщения- действия могут изменять состояние встроенного контента 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. Дополнительная информация

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