1. Прежде чем начать
Содержимое Looker должно быть встроено в iframe с помощью частного внедрения или внедрения SSO . В этой кодовой лаборатории мы будем взаимодействовать с вашим iframe через JavaScript, чтобы сделать вашу веб-страницу более динамичной. Ваша веб-страница будет отправлять и получать сообщения из встроенного в iframe содержимого Looker.
Предварительные условия
- Иметь работающий экземпляр Looker
- Встроить частную панель управления Looker или систему единого входа в iframe.
- Понимание метода window.postMessage()
Что вы узнаете
- Как подготовить экземпляр 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");
}
}
});
Фрагмент кода делает следующее:
- Прослушивает событие
"message"
от объектаwindow
. - Проверяет, что
source
свойством сообщения является iframe со встроенным содержимым Looker. - Проверяет, что свойство
origin
сообщения является доменом вашего экземпляра Looker. - JSON анализирует свойство
data
сообщения для доступа и анализа объекта события. - Включает свойство
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');
- Определите свой iframe, на который вы отправите свое действие.
- Вызовите метод
postMessage()
для свойстваcontentWindow
iframe, чтобы отправить сообщение.
Теперь ваша хост-страница может динамически изменять состояние встроенного контента Looker!
5. Дополнительная информация
Поздравляем! Теперь вы можете прослушивать события и отправлять действия со встроенным контентом Looker вашего iframe. Посетите эти ресурсы для получения дополнительной информации:
- Справочник событий для всех доступных событий и их свойств.
- Справочник действий для всех доступных действий и их свойств.
- Рекомендации по обеспечению безопасности при встраивании контента Looker