嵌入式 Looker iframe 消息

1. 准备工作

您应将 Looker 内容嵌入到具有私密嵌入或单点登录嵌入的 iframe 中。在此 Codelab 中，我们将通过 JavaScript 与 iframe 进行互动，使网页更具动态性。您的网页将向 iframe 的嵌入式 Looker 内容发送消息，并从其中接收消息。

前提条件

学习内容

  • 如何准备 iframe 和 Looker 实例以进行 JavaScript 互动
  • 如何监听来自 iframe 的事件
  • 如何向 iframe 发送操作消息

所需条件

  • 对管理 iframe 的前端代码（HTML 和 JavaScript）的访问权限
  • 对 Looker 实例中的管理员嵌入设置的访问权限

2. 准备工作

您需要先准备好 iframe 和 Looker 实例，然后才能与 iframe 互动。

向 iframe 添加 id 属性

您需要验证来自 iframe 的消息。为此，请在 iframe 上定义 id 属性：

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

将嵌入内容的网域添加到 iframe 的 src 属性

确定托管 iframe 的网页的网域。假设网页的网址为 https://mywebsite.com/with/embed，则网页的网域为 https://mywebsite.com。

如果您使用的是私密嵌入，请在 iframe 的 src 中添加网域作为 embed_domain 查询参数：

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

如果您使用的是 SSO 嵌入，请将网域作为 embed_domain 查询参数添加到嵌入网址。

在 Looker 实例中将嵌入的网域列入许可名单

最后，您需要在 Looker 实例中将嵌入的网域列入许可名单，以允许发送消息。

前往 Looker 实例的管理部分中的嵌入页面。https://your_instance.looker.com/admin/embed

在 Embedded Domain Allowlist（嵌入式网域许可名单）字段中，输入嵌入式网域。输入完毕后，按 Tab 键，使网域显示在方框中。请勿添加尾部斜杠 /。

选择更新按钮。

3. 监听来自 iframe 的事件消息

包含嵌入式 Looker 内容的 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. 监听来自 window 对象的 "message" 事件。
  2. 检查消息的 source 属性是否为包含嵌入式 Looker 内容的 iframe。
  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. 对 iframe 的 contentWindow 属性调用 postMessage() 方法以发送消息。

现在，您的宿主网页可以动态更改嵌入式 Looker 内容的状态了！

5. 其他信息

恭喜！您现在可以监听 iframe 中嵌入的 Looker 内容发出的事件，并向其发送操作。如需了解详情，请参阅以下资源：