嵌入式 JavaScript 事件

创建嵌入后（您可以通过公开、私密、通过单点登录 (SSO) 或通过 API 完成），您可以通过 JavaScript 与这些 iframe 进行互动。您可以根据嵌入项的状态使网页更具动态性，甚至可以通过网页更改嵌入项的内容。

请注意，Looker 无法控制浏览器向 Web 应用分派事件的顺序。这意味着，浏览器或平台无法保证事件的顺序。请务必适当编写 JavaScript，以将不同浏览器的事件处理考虑在内。

您可以通过以下两种方式使用 Looker 嵌入内容的 JavaScript：

• 使用 Looker 的嵌入软件开发套件 (SDK)，如 Embed SDK 文档页面中所述
• 使用 JavaScript 事件，如本页中的在 JavaScript 中访问事件部分所述

准备工作

您需要先执行一些操作，然后才能与嵌入式 iframe 互动：

• 向 iframe 添加 ID
• 将嵌入网域添加到 iframe src 属性
• 将嵌入网域添加到许可名单

向 iframe 添加 ID

稍后您要做的一件事是验证您处理的信息是否确实来自 Looker 的 iframe。为方便起见，请务必向 iframe 添加 ID（如果尚未添加）。在以下示例中，我们添加了 id="looker"：

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

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

在 iframe 的 src 中，添加使用 iframe 的网域。在以下示例中，我们添加了 ?embed_domain=https://mywebsite.com"：

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

如果您使用的是 SSO 嵌入，请务必将 embed_domain 添加到嵌入网址。

请勿在 embed_domain 末尾处添加斜杠 (/)。

将嵌入网域添加到许可名单

最后，您需要将使用 iframe 的网域添加到 Looker 的管理面板的嵌入页面上的许可名单中：

1. 输入使用 iframe 的网域。输入完毕后，请务必按 Tab 键，使网域显示在方框中。请勿在域名网址中添加结尾斜杠 (/)。
2. 点击更新按钮。

您可以使用许可名单中的 * 通配符来创建网域格式。例如，https://*.mycompany.com 将同时允许 https://analytics.mycompany.com 和 https://data.mycompany.com。

从 iframe 中检索数据

完成准备步骤后，您就可以通过监听 postMessage 事件，访问在 Looker iframe 和您的域名之间传递的事件。

请务必检查事件是否来自 Looker iframe 和网域，以避免恶意消息。

如上文事件类型参考部分所述，嵌入式 iframe 可以创建一些事件类型。

使用 JavaScript 访问事件

以下是在原生 JavaScript 中监听这些事件，然后将其记录到控制台的示例：

window.addEventListener("message", function(event) {
  if (event.source === document.getElementById("looker").contentWindow) {
    if (event.origin === "https://instance_name.looker.com") {
      console.log(JSON.parse(event.data));
    }
  }
});

以下是在 jQuery 中监听这些事件，然后将其记录到控制台的示例：

$(window).on("message", function(event) {
  if (event.originalEvent.source === $("#looker")[0].contentWindow) {
    if (event.origin === "https://instance_name.looker.com") {
      console.log(JSON.parse(event.data));
    }
  }
});

事件类型摘要表

下表总结了事件类型。点击某个事件类型可查看该事件的详细信息。

事件类型	事件原因
dashboard:loaded	在图块未设置为自动运行的信息中心内，信息中心及其元素已加载，但查询尚未运行。
dashboard:run:start	信息中心已开始加载，其图块已开始加载和查询数据。
dashboard:run:complete	信息中心已运行完毕，所有图块都已加载和查询完毕。
dashboard:download	已开始下载信息中心的 PDF 文件。
dashboard:save:complete	ADDED 21.6 已修改并保存信息中心。
dashboard:delete:complete	ADDED 21.6 信息中心已被删除。
dashboard:tile:start	图块已开始加载或查询数据。
dashboard:tile:complete	图块已运行查询完毕。
dashboard:tile:download	已开始下载图块数据。
dashboard:tile:explore	用户点击了信息中心图块中的从此处探索选项。
dashboard:tile:view	用户点击了信息中心图块中的 View Original Look（查看原始外观）选项。
dashboard:filters:changed	已应用或更改信息中心的过滤条件。
look:ready	Look 已开始加载查询数据，无论查询是否运行。
look:run:start	Look 已开始加载查询数据，并且查询已开始运行。
look:run:complete	Look 已完成运行查询。
look:save:complete	ADDED 21.6 已修改并保存样式。
look:delete:complete	ADDED 21.6 我们已将“查看”功能移入回收站文件夹。
drillmenu:click	用户点击了使用 link LookML 参数创建的信息中心内的细目菜单。
drillmodal:download	用户打开了数字面板板块上的钻研对话框，并点击了下载选项。
drillmodal:explore	用户点击了展开对话框中的从此处探索选项。
explore:ready	“探索”已开始加载查询数据，无论查询是否运行。
explore:run:start	“探索”已开始加载查询数据，且该查询已开始运行。
explore:run:complete	“探索”已运行查询。
explore:state:changed	“探索”页面网址由于用户的操作而发生了变化。
page:changed	用户导航到 iframe 内的新页面。
page:properties:changed	信息中心 iframe 的高度已更改。

事件类型参考

嵌入式 iframe 可以创建许多不同类型的事件：

dashboard:loaded

在未将图块设为自动运行的信息中心中，系统会在加载信息中心及其元素之后、运行查询之前创建此事件。

旧版信息中心不提供 options 属性。

type: "dashboard:loaded",
status: "complete",
dashboard: {
  id: 1,
  title: "Business Pulse",
  dashboard_filters: {
    "date": "Last 6 Years",
    "state": ""
  },
  absoluteUrl: "https://self-signed.looker.com:9999/embed/dashboards/1?embed_domain=https%3A%2F%2Fself-signed.looker.com%3A9999&date=Last+6+Years&state=",
  url: "/embed/dashboards/1?embed_domain=https%3A%2F%2Fself-signed.looker.com%3A9999&date=Last+6+Years&state=",
  options: {
    layouts: [
      {
        id: 1,
        dashboard_id: 1,
        type: "newspaper",
        active: true,
        column_width: null,
        width: null,
        deleted: false,
        dashboard_layout_components: [
          {
            id: 1,
            dashboard_layout_id: 1,
            dashboard_element_id: 1,
            row: 0,
            column: 0,
            width: 8,
            height: 4,
            deleted: false
          },
          {
            id: 2,
            dashboard_layout_id: 1,
            dashboard_element_id: 2,
            row: 0,
            column: 8,
            width: 8,
            height: 4,
            deleted: false
          }
        ]
      }
    ],
    elements: {
      1: {
        title: "Total Orders",
        title_hidden: false,
        vis_config: {
          type: "single_value",
          font_size: "medium",
          title: "Total Orders"
        }
      },
      2: {
        title: "Average Order Profit",
        title_hidden: false,
        vis_config: {
          type: "single_value",
          title: "Average Order Profit"
        }
      }
    }
  }
}

属性	格式	说明
status	字符串	指示信息中心及其元素是否已成功加载。
dashboard.id	数字	信息中心的 ID 号。
dashboard.title	字符串	标题，如信息中心顶部所示。
dashboard.dashboard_filters	对象	应用于信息中心的过滤条件。此对象的格式为：{"Filter name 1": "value 1", "Filter name 2": "value 2", ...}
dashboard.absoluteUrl	字符串	完整的信息中心网址。
dashboard.url	字符串	相对信息中心网址（仅此路径）。
dashboard.options	对象	信息中心布局、信息中心布局组件和信息中心元素的属性和值。使用 dashboard:options:set 事件可以为 options 对象返回的所有属性指定更新后的值。旧版信息中心不提供此选项。

dashboard:run:start

当信息中心已开始加载（其图块将开始加载和查询数据）时，系统将创建此事件。

type: "dashboard:run:start",
dashboard: {
  id: 23,
  title: "My Dashboard",
  url: "/embed/dashboards/...",
  absoluteUrl: "https://instance_name.looker.com/embed/dashboards/...",
  dashboard_filters: {
    "Date": "Last 28 days",
    "Total Orders": "Greater than 100"
  }
}

属性	格式	说明
dashboard.id	数字	信息中心的 ID 号。
dashboard.url	字符串	相对信息中心网址（仅此路径）。
dashboard.absoluteUrl	字符串	完整的信息中心网址。
dashboard.title	字符串	标题，如信息中心顶部所示。
dashboard.dashboard_filters	对象	应用于信息中心的过滤条件。此对象的格式为：{"Filter name 1": "value 1", "Filter name 2": "value 2", ...}

dashboard:run:complete

当信息中心运行完毕且所有图块都完成加载和查询时，系统会创建此事件。无论所有图块是否成功加载，系统都会创建此事件。

旧版信息中心不提供 options 和 tileStatuses 属性。

type: "dashboard:run:complete",
status: "complete",
dashboard: {
  id: 23,
  title: "My Dashboard",
  url: "/embed/dashboards/...",
  absoluteUrl: "https://my.looker.com/embed/dashboards/...",
  dashboard_filters: {
    "Date": "Last 28 days",
    "Total Orders": "Greater than 100"
  }
  options: {
    layouts: [
      {
        id: 1,
        dashboard_id: 1,
        type: "newspaper",
        active: true,
        column_width: null,
        width: null,
        deleted: false,
        dashboard_layout_components: [
          {
            id: 1,
            dashboard_layout_id: 1,
            dashboard_element_id: 1,
            row: 0,
            column: 0,
            width: 8,
            height: 4,
            deleted: false
          },
          {
            id: 2,
            dashboard_layout_id: 1,
            dashboard_element_id: 2,
            row: 0,
            column: 8,
            width: 8,
            height: 4,
            deleted: false
          }
        ]
      }
    ],
    elements: {
      1: {
        title: "Total Orders",
        title_hidden: false,
        vis_config: {
          type: "single_value",
          font_size: "medium",
          title: "Total Orders"
        }
      },
      2: {
        title: "Average Order Profit",
        title_hidden: false,
        vis_config: {
          type: "single_value",
          title: "Average Order Profit"
        }
      }
    }
  }
}

属性	格式	说明
status	字符串	指示信息中心及其元素是否已成功运行。如果信息中心及其元素成功运行，status 会返回 "complete"；否则，status 会返回 "error"。如果正在运行的信息中心已停止，无论是通过界面还是通过 dashboard:stop 操作，status 都会返回 "stopped"。
dashboard.id	数字	信息中心的 ID 号。
dashboard.url	字符串	相对信息中心网址（仅此路径）。
dashboard.absoluteUrl	字符串	完整的信息中心网址。
dashboard.title	字符串	标题，如信息中心顶部所示。
dashboard.dashboard_filters	对象	应用于信息中心的过滤条件。此对象的格式为：{"Filter name 1": "value 1", "Filter name 2": "value 2", ...}
dashboard.options	对象	信息中心布局、信息中心布局组件和信息中心元素的属性和值。您可以使用 dashboard:options:set 操作为 options 对象返回的所有属性更新值。旧版信息中心不提供此选项。
dashboard.tileStatuses	对象数组	提供图块状态的对象数组。对象属性包括： tileId - 图块的 ID 编号。 status - 如果图块查询已成功运行，status 会返回 "complete"；否则，status 会返回 "error"。 errors - 当 status 属性为 "error" 时填充。提供错误详情的对象数组，包括错误消息文本、更详细的错误说明，以及引发错误的图块 SQL 查询。 。旧版信息中心不提供此选项。

dashboard:download

此事件会在信息中心的 PDF 开始下载时创建。

type: "dashboard:download",
dashboard: {
  id: 23,
  title: "My Dashboard",
  url: "/embed/dashboards/...",
  absoluteUrl: "https://instance_name.looker.com/embed/dashboards/...",
  dashboard_filters: {
    "Date": "Last 28 days",
    "Total Orders": "Greater than 100"
  }
}
fileFormat: "pdf"

属性	格式	说明
dashboard.id	数字	信息中心的 ID 号。
dashboard.url	字符串	相对信息中心网址（仅此路径）。
dashboard.absoluteUrl	字符串	完整的信息中心网址。
dashboard.title	字符串	信息中心标题，如信息中心顶部所示。
dashboard.dashboard_filters	对象	应用于信息中心的过滤条件。此对象的格式为：{"Filter name 1": "value 1", "Filter name 2": "value 2", ...}
fileFormat	字符串	下载的信息中心的格式（目前只有 "pdf"）。

dashboard:save:complete

此事件在修改并保存之后创建。

旧版信息中心不提供此事件。

type: "dashboard:save:complete",
dashboard: {
  id: 23,
  title: "My Dashboard",
  dashboard_filters: {
    "Date": "Last 28 days",
    "Total Orders": "Greater than 100"
  }
  absoluteUrl: "https://instance_name.looker.com/embed/dashboards/...",
  url: "/embed/dashboards/...",
  options: {
    layouts: [
      {
        id: 1,
        dashboard_id: 1,
        type: "newspaper",
        active: true,
        column_width: null,
        width: null,
        deleted: false,
        dashboard_layout_components: [
          {
            id: 1,
            dashboard_layout_id: 1,
            dashboard_element_id: 1,
            row: 0,
            column: 0,
            width: 8,
            height: 4,
            deleted: false
          },
          {
            id: 2,
            dashboard_layout_id: 1,
            dashboard_element_id: 2,
            row: 0,
            column: 8,
            width: 8,
            height: 4,
            deleted: false
          }
        ]
      }
    ],
    elements: {
      1: {
        title: "Total Orders",
        title_hidden: false,
        vis_config: {
          type: "single_value",
          font_size: "medium",
          title: "Total Orders"
        }
      },
      2: {
        title: "Average Order Profit",
        title_hidden: false,
        vis_config: {
          type: "single_value",
          title: "Average Order Profit"
        }
      }
    }
  }
}

属性	格式	说明
dashboard.id	数字	信息中心的 ID 号。
dashboard.title	字符串	标题，如信息中心顶部所示。
dashboard.dashboard_filters	对象	应用于信息中心的过滤条件。此对象的格式为：{"Filter name 1": "value 1", "Filter name 2": "value 2", ...}
dashboard.absoluteUrl	字符串	完整的信息中心网址。
dashboard.url	字符串	相对信息中心网址（仅此路径）。
dashboard.options	对象	信息中心布局、信息中心布局组件和信息中心元素的属性和值。使用 dashboard:options:set 事件可以为 options 对象返回的所有属性指定更新后的值。

dashboard:delete:complete

此事件在删除信息中心时创建。

旧版信息中心不提供此事件。

type: "dashboard:delete:complete",
dashboard: {
  id: 23,
  title: "My Dashboard",
  dashboard_filters: {
    "Date": "Last 28 days",
    "Total Orders": "Greater than 100"
  }
  absoluteUrl: "https://instance_name.looker.com/embed/dashboards/...",
  url: "/embed/dashboards/...",
  options: {
    layouts: [
      {
        id: 1,
        dashboard_id: 1,
        type: "newspaper",
        active: true,
        column_width: null,
        width: null,
        deleted: false,
        dashboard_layout_components: [
          {
            id: 1,
            dashboard_layout_id: 1,
            dashboard_element_id: 1,
            row: 0,
            column: 0,
            width: 8,
            height: 4,
            deleted: false
          },
          {
            id: 2,
            dashboard_layout_id: 1,
            dashboard_element_id: 2,
            row: 0,
            column: 8,
            width: 8,
            height: 4,
            deleted: false
          }
        ]
      }
    ],
    elements: {
      1: {
        title: "Total Orders",
        title_hidden: false,
        vis_config: {
          type: "single_value",
          font_size: "medium",
          title: "Total Orders"
        }
      },
      2: {
        title: "Average Order Profit",
        title_hidden: false,
        vis_config: {
          type: "single_value",
          title: "Average Order Profit"
        }
      }
    }
  }
}

属性	格式	说明
dashboard.id	数字	信息中心的 ID 号。
dashboard.title	字符串	标题，如信息中心顶部所示。
dashboard.dashboard_filters	对象	应用于信息中心的过滤条件。此对象的格式为：{"Filter name 1": "value 1", "Filter name 2": "value 2", ...}
dashboard.absoluteUrl	字符串	完整的信息中心网址。
dashboard.url	字符串	相对信息中心网址（仅此路径）。
dashboard.options	对象	信息中心布局、信息中心布局组件和信息中心元素的属性和值。使用 dashboard:options:set 事件可以为 options 对象返回的所有属性指定更新后的值。

dashboard:tile:start

此事件在图块开始加载或查询数据时创建。

type: "dashboard:tile:start",
dashboard: {
  id: 23,
  title: "My Dashboard",
  url: "/embed/dashboards/...",
  absoluteUrl: "https://instance_name.looker.com/embed/dashboards/...",
  dashboard_filters: {
    "Date": "Last 28 days",
    "Total Orders": "Greater than 100"
  }
}
tile: {
  id: 123,
  title: "Quarterly Sales",
  listen: {
    "Date": "order.date",
    "Total Orders": "order.count"
  }
}

属性	格式	说明
dashboard.id	数字	图块所属的信息中心的 ID 号。
dashboard.url	字符串	图块所属的相对信息中心网址（仅此路径）。
dashboard.absoluteUrl	字符串	图块所属的完整信息中心网址。
dashboard.title	字符串	信息中心标题，如卡片所属的信息中心顶部。
dashboard.dashboard_filters	对象	应用于相应图块所属的信息中心的过滤条件。此对象的格式为：{"Filter name 1": "value 1", "Filter name 2": "value 2", ...}
tile.id	整数	事件的 ID 号，而非图块 ID。
tile.title	字符串	图块标题，如图块顶部所示。
tile.listen	对象	此图块会监听全局图块。此对象的格式为：{"Filter Label": "Filter Field", ...}

dashboard:tile:complete

此事件在图块运行查询后创建。

旧版信息中心不提供 errors 属性。

type: "dashboard:tile:complete",
dashboard: {
  id: 23,
  title: "My Dashboard",
  url: "/embed/dashboards/...",
  absoluteUrl: "https://instance_name.looker.com/embed/dashboards/...",
  dashboard_filters: {
    "Date": "Last 28 days",
    "Total Orders": "Greater than 100"
  }
}
status: "complete",
truncated: false,
tile: {
  id: 123,
  title: "Quarterly Sales",
  listen: {
    "Date": "order.date",
    "Total Orders": "order.count"
  }
}

属性	格式	说明
dashboard.id	数字	图块所属的信息中心的 ID 号。
dashboard.url	字符串	图块所属的相对信息中心网址（仅此路径）。
dashboard.absoluteUrl	字符串	图块所属的完整信息中心网址。
dashboard.title	字符串	信息中心标题，如卡片所属的信息中心顶部。
dashboard.dashboard_filters	对象	应用于相应图块所属的信息中心的过滤条件。此对象的格式为：{"Filter name 1": "value 1", "Filter name 2": "value 2", ...}
status	字符串	图块查询是否成功完成。可能的值是 "complete" 或 "error"。
truncated	布尔值	查询返回的行数是否超过查询行数上限，导致图块查询结果是否被截断。行数上限可以是用户指定的行数上限，也可以是 Looker 默认的行数限制（5000 行）。
tile.id	整数	事件的 ID 号，而非图块 ID。
tile.title	字符串	图块标题，如图块顶部所示。
tile.listen	对象	此图块会监听全局图块。此对象的格式为：{"Filter Label": "Filter Field", ...}
tile.errors	对象数组	当 status 属性为 "error" 时填充。提供错误详情的对象数组，包括错误消息文本、更详细的错误说明，以及引发错误的图块 SQL 查询。旧版信息中心不提供此选项。

dashboard:tile:download

此事件在图块的数据开始下载时创建。

type: "dashboard:tile:download",
dashboard: {
  id: 23,
  title: "My Dashboard",
  url: "/embed/dashboards/...",
  absoluteUrl: "https://instance_name.looker.com/embed/dashboards/...",
  dashboard_filters: {
    "Date": "Last 28 days",
    "Total Orders": "Greater than 100"
  }
}
tile: {
  id: 123,
  title: "Quarterly Sales"
  listen: {
    "Date": "order.date",
    "Total Orders": "order.count"
  }
}
fileFormat: "pdf"

属性	格式	说明
dashboard.id	数字	图块所属的信息中心的 ID 号。
dashboard.url	字符串	图块所属的相对信息中心网址（仅此路径）。
dashboard.absoluteUrl	字符串	图块所属的完整信息中心网址。
dashboard.title	字符串	信息中心标题，如卡片所属的信息中心顶部。
dashboard.dashboard_filters	对象	应用于相应图块所属的信息中心的过滤条件。此对象的格式为：{"Filter name 1": "value 1", "Filter name 2": "value 2", ...}
tile.id	整数	事件的 ID 号，而非图块 ID。
tile.title	字符串	图块标题，如图块顶部所示。
tile.listen	对象	此图块会监听全局图块。此对象的格式为：{"Filter Label": "Filter Field", ...}
fileFormat	字符串	已下载图块的格式（目前只有 "pdf"）。

dashboard:tile:explore

当用户点击信息中心图块中的从此处探索选项时，系统会创建此事件。

type: "dashboard:tile:explore",
label: 'Explore From Here',
url: '/embed/explore/model/view...',
dashboard: {
  id: 23,
  title: "My Dashboard",
  url: "/embed/dashboards/...",
  absoluteUrl: "https://instance_name.looker.com/embed/dashboards/...",
  dashboard_filters: {
    "Date": "Last 28 days",
    "Total Orders": "Greater than 100"
  }
}
tile: {
  id: 123,
  title: "Quarterly Sales",
  listen: {
    "Date": "order.date",
    "Total Orders": "order.count"
  }
}

属性	格式	说明
label	字符串	按钮标签。
url	字符串	要查看的探索的相对网址（仅此路径）。
dashboard.id	数字	图块所属的信息中心的 ID 号。
dashboard.url	字符串	图块所属的相对信息中心网址（仅此路径）。
dashboard.absoluteUrl	字符串	图块所属的完整信息中心网址。
dashboard.title	字符串	信息中心标题，如卡片所属的信息中心顶部。
dashboard.dashboard_filters	对象	应用于相应图块所属的信息中心的过滤条件。此对象的格式为：{"Filter name 1": "value 1", "Filter name 2": "value 2", ...}
tile.id	整数	事件的 ID 号，而非图块 ID。
tile.title	字符串	图块标题，如图块顶部所示。
tile.listen	对象	此图块会监听全局图块。此对象的格式为：{"Filter Label": "Filter Field", ...}

dashboard:tile:view

当用户点击信息中心图块中的 View Original Look 选项时，系统会创建此事件。

type: "dashboard:tile:view",
label: 'View Original Look',
url: '/embed/look/...',
dashboard: {
  id: 23,
  title: "My Dashboard",
  url: "/embed/dashboards/...",
  absoluteUrl: "https://instance_name.looker.com/embed/dashboards/...",
  dashboard_filters: {
    "Date": "Last 28 days",
    "Total Orders": "Greater than 100"
  }
}
tile: {
  id: 123,
  title: "Quarterly Sales",
  listen: {
    "Date": "order.date",
    "Total Orders": "order.count"
  }
}

属性	格式	说明
label	字符串	按钮标签。
url	字符串	要查看的 Look 的相对网址（仅此路径）。
dashboard.id	数字	图块所属的信息中心的 ID 号。
dashboard.url	字符串	图块所属的相对信息中心网址（仅此路径）。
dashboard.absoluteUrl	字符串	图块所属的完整信息中心网址。
dashboard.title	字符串	信息中心标题，如卡片所属的信息中心顶部。
dashboard.dashboard_filters	对象	应用于相应图块所属的信息中心的过滤条件。此对象的格式为：{"Filter name 1": "value 1", "Filter name 2": "value 2", ...}
tile.id	整数	事件的 ID 号，而非图块 ID。
tile.title	字符串	图块标题，如图块顶部所示。
tile.listen	对象	此图块会监听全局图块。此对象的格式为：{"Filter Label": "Filter Field", ...}

dashboard:filters:changed

系统会在应用或更改信息中心的过滤条件时创建此事件。

旧版信息中心不提供 options 属性。

type: "dashboard:filters:changed",
dashboard: {
  id: 23,
  title: "My Dashboard",
  url: "/embed/dashboards/...",
  absoluteUrl: "https://instance_name.looker.com/embed/dashboards/...",
  dashboard_filters: {
    "Date": "Last 28 days",
    "Total Orders": "Greater than 100"
  }
  options: {
    layouts: [
      {
        id: 1,
        dashboard_id: 1,
        type: "newspaper",
        active: true,
        column_width: null,
        width: null,
        deleted: false,
        dashboard_layout_components: [
          {
            id: 1,
            dashboard_layout_id: 1,
            dashboard_element_id: 1,
            row: 0,
            column: 0,
            width: 8,
            height: 4,
            deleted: false
          },
          {
            id: 2,
            dashboard_layout_id: 1,
            dashboard_element_id: 2,
            row: 0,
            column: 8,
            width: 8,
            height: 4,
            deleted: false
          }
        ]
      }
    ],
    elements: {
      1: {
        title: "Total Orders",
        title_hidden: false,
        vis_config: {
          type: "single_value",
          font_size: "medium",
          title: "Total Orders"
        }
      },
      2: {
        title: "Average Order Profit",
        title_hidden: false,
        vis_config: {
          type: "single_value",
          title: "Average Order Profit"
        }
      }
    }
  }
}

属性	格式	说明
dashboard.id	数字	信息中心的 ID 号。
dashboard.url	字符串	相对信息中心网址（仅此路径）。
dashboard.absoluteUrl	字符串	完整的信息中心网址。
dashboard.title	字符串	标题，如信息中心顶部所示。
dashboard.dashboard_filters	对象	应用于信息中心的过滤条件。此对象的格式为：{"Filter name 1": "value 1", "Filter name 2": "value 2", ...}
dashboard.options	对象	信息中心布局、信息中心布局组件和信息中心元素的属性和值。使用 dashboard:options:set 事件可以为 options 对象返回的所有属性指定更新后的值。旧版信息中心不提供此选项。

look:ready

当 Look 开始加载查询数据时，无论查询是否运行，系统都会创建此事件。

type: "look:ready",
look: {
  url: "/embed/looks/...",
  absoluteUrl: "https://instance_name.looker.com/embed/looks/...",
  }
}

属性	格式	说明
look.url	字符串	相对的查看网址（仅路径）
look.absoluteUrl	字符串	完整的 Look 网址

look:run:start

当 Look 开始加载查询数据并且查询开始运行时，系统会创建此事件。

type: "look:run:start",
look: {
  url: "/embed/looks/...",
  absoluteUrl: "https://instance_name.looker.com/embed/looks/...",
  }
}

属性	格式	说明
look.url	字符串	相对的查看网址（仅路径）
look.absoluteUrl	字符串	完整的 Look 网址

look:run:complete

当 Look 完成查询的创建时，系统会创建此事件。

type: look:run:complete
look: {
  url: "/embed/looks/...",
  absoluteUrl: "https://instance_name.looker.com/embed/looks/...",
  }
}

属性	格式	说明
look.url	字符串	相对的查看网址（仅路径）
look.absoluteUrl	字符串	完整的 Look 网址

look:save:complete

修改和修改保存后，系统会创建此事件。系统会在用户执行以下某项任务时创建此事件：

• 点击修改按钮以修改外观，然后点击保存
• 使用保存和另存为...菜单选项保存样式
• 将样式从一个文件夹移至另一个文件夹

如果使用保存和保存到现有信息中心或修改设置菜单选项保存了 Look，则系统不会创建此事件。

type: look:save:complete
look: {
  url: "/embed/looks/...",
  absoluteUrl: "https://instance_name.looker.com/embed/looks/...",
  spaceId: 123
  }
}

属性	格式	说明
look.url	字符串	相对的查看网址（仅路径）
look.absoluteUrl	字符串	完整的 Look 网址
look.spaceID	整数	存储 Look 的文件夹 ID

look:delete:complete

该事件会在 Look 移至“回收站”文件夹时创建。

type: look:delete:complete
look: {
  url: "/embed/looks/...",
  absoluteUrl: "https://instance_name.looker.com/embed/looks/...",
  }
}

属性	格式	说明
look.url	字符串	相对的查看网址（仅路径）
look.absoluteUrl	字符串	完整的 Look 网址

drillmenu:click

当用户点击在使用 link LookML 参数创建的信息中心内的细目菜单时，系统会创建此事件。例如，以下 LookML 会创建一个展开菜单，用户可以通过该菜单查看按 state 维度过滤的数据：

dimension: state {
  type: string
  sql: ${TABLE}.state ;;
  link: {
    label: "Filter by {{ state | encode_uri }}"
    url: "filter::q={{ state | encode_uri }}"
    icon_url: "https://google.com/favicon.ico"
  }
}

当 state 过滤条件设置为 Illinois 时，drillmenu:click 事件会向 iframe 的主机返回以下内容：

type: "drillmenu:click",
label: "Filter by Illinois",
link_type: "url",
modal: false,
target: '_self',
url: "#filter::state=Illinois"
context: ' '

属性	格式	说明
label	字符串	展开菜单上显示的链接标签
link_type	字符串	链接目的地的对象类型
modal	布尔值	是否使用细目对话框而非浏览器导航
target	字符串	如果链接目标将替换当前 iframe，则值为 _self；如果链接目标将打开新窗口，则值为 _blank
url	字符串	链接目标网址
context	字符串	某些类型的可视化图表使用的内部属性

沙盒 iframe 会阻止点击细目菜单时在新窗口中打开。在 iframe 代码中使用以下沙盒值：

sandbox = "allow-same-origin allow-scripts"

drillmodal:download

用户通过信息中心图块打开细目对话框并点击下载选项时，系统会创建此事件。

{
type: "drillmodal:download",
dashboard: {
  id: 23,
  title: "My Dashboard",
  url: "/embed/dashboards/…",
  absoluteUrl: "https://instance_name.looker.com/embed/dashboards/…",
  dashboard_filters: {
    "Date": "Last 28 days",
    "Total Orders": "Greater than 100"
  }
}
drillExploreUrl: "/embed...",
fileFormat: "pdf"
}

属性	格式	说明
dashboard.id	数字	图块所属的信息中心的 ID 号。
dashboard.title	字符串	信息中心标题，如卡片所属的信息中心顶部。
dashboard.url	字符串	图块所属的相对信息中心网址（仅此路径）。
dashboard.absoluteUrl	字符串	图块所属的完整信息中心网址。
dashboard.dashboard_filters	对象	应用于相应图块所属的信息中心的过滤条件。此对象的格式为：{"Filter name 1": "value 1", "Filter name 2": "value 2", ...}
drillExploreUrl	字符串	要下载的相对“探索”网址（仅此路径）。
fileFormat	字符串	数据下载的文件格式。

drillmodal:explore

当用户点击展开细目对话框中的从此处探索选项时，系统会创建此事件。

type: "drillmodal:explore",
label: "Explore From Here",
url: "/embed/explore/model/view..."

属性	格式	说明
label	字符串	展开菜单上显示的按钮标签
url	字符串	相对浏览网址（仅查看路径）

explore:ready

当探索开始加载查询数据时，无论查询是否运行，系统都会创建此事件。

type: "explore:ready",
explore: {
  url: "/embed/explore/...",
  absoluteUrl: "https://instance_name.looker.com/embed/explore/...",
  }
}

属性	格式	说明
explore.url	字符串	相对“探索”网址（仅此路径）
explore.absoluteUrl	字符串	完整的“探索”网址

explore:run:start

当“探索”开始加载查询数据并且查询开始运行时，系统会创建此事件。

type: "explore:run:start",
explore: {
  url: "/embed/explore/...",
  absoluteUrl: "https://instance_name.looker.com/embed/explore/...",
  }
}

属性	格式	说明
explore.url	字符串	相对“探索”网址（仅此路径）
explore.absoluteUrl	字符串	完整的“探索”网址

explore:run:complete

当“探索”部分完成查询的创建后，系统会创建此事件。

type: "explore:run:complete",
explore: {
  url: "/embed/explore/...",
  absoluteUrl: "https://instance_name.looker.com/embed/explore/...",
  }
}

属性	格式	说明
explore.url	字符串	相对“探索”网址（仅此路径）
explore.absoluteUrl	字符串	完整的“探索”网址

explore:state:changed

当“探索”页面网址因用户操作而发生变化时，系统会创建此事件。

type: "explore:state:changed",
explore: {
  url: "/embed/explore/...",
  absoluteUrl: "https://instance_name.looker.com/embed/explore/..."
}

属性	格式	说明
explore.url	字符串	相对“探索”网址（仅此路径）
explore.absoluteUrl	字符串	完整的“探索”网址

page:changed

此事件在用户导航到 iframe 中的新页面时创建。

type: "page:changed",
page: {
  type: "dashboard",
  url: "/embed/dashboards/...",
  absoluteUrl: "https://instance_name.looker.com/embed/dashboards/..."
}

属性	格式	说明
page.type	字符串	刚刚导航到的网页的类型，例如 "dashboard"、"look" 或 "explore"
page.url	字符串	刚刚导航到的网页的相对网址（仅路径）
page.absoluteUrl	字符串	刚刚导航到的网页的完整网址

page:properties:changed

此事件会在信息中心 iframe 的高度发生变化时创建。不适用于“外观”或“探索”，因为这些内容会自动根据 iframe 的大小调整高度。

type: "page:properties:changed",
height: 1000

属性	格式	说明
height	整数	信息中心 iframe 的高度（以像素为单位）

更改 iframe

准备好 iframe 以进行数据检索后，您可以按照以下步骤更改 iframe：

1. 使用 JSON 编写请求。
2. 将请求发布到 iframe 的 contentWindow。

使用 JSON 格式编写请求

您可以对 iframe 进行多项更改（以 JSON 格式提交）。本页的操作参考部分介绍了可用选项。请务必使用 JSON.stringify 将您的操作转换为 JSON，如下所示：

var my_request = JSON.stringify(
  {
    type: "dashboard:run"
  }
);

将请求发布到 iframe 的 contentWindow 属性

最后，将您的消息发布到 iframe 的 contentWindow，如下所示：

var my_iframe = document.getElementById("my_iframe_id");

my_iframe.contentWindow.postMessage(my_request, 'https://instance_name.looker.com');

操作摘要表

下表总结了操作。点击某项操作，即可查看相应操作的详细信息。

操作	操作说明
dashboard:load	在 iframe 中加载新信息中心，替换现有信息中心。
dashboard:run	在 iframe 中运行信息中心。
dashboard:filters:update	更新 iframe 中的现有信息中心过滤条件。
dashboard:options:set	将新值写入信息中心布局和信息中心元素属性。
dashboard:schedule_modal:open	打开 Scheduler，可让用户将 Looker 内容传送到各种目的地。
dashboard:stop	停止正在运行或重新加载数据的信息中心。
look:run	在 iframe 中运行 Look。
look:filters:update	更新 iframe 中的现有“样式”滤镜。
explore:run	在 iframe 中运行探索。
explore:filters:update	更新或移除 iframe 中的现有“探索”过滤条件。

操作参考

您可以将以下操作发布到嵌入式 iframe：

dashboard:load

旧版信息中心不支持此操作。

使用该操作可在 iframe 中加载新信息中心，从而取代现有的信息中心。新信息中心将像打开新的信息中心页面一样开始执行查询。

{
  type: "dashboard:load",
  id: "101",
  pushHistory: false
}

属性	格式	说明
type	字符串	使用 dashboard:load 类型表示您要将新信息中心加载到 iframe 中。
id	字符串	要加载的信息中心的 ID。
pushHistory	布尔值	如果为 true，则加载的信息中心会创建新的浏览器历史记录条目，并且用户可以使用浏览器的返回按钮返回到上一个信息中心。如果为 false，系统会替换当前的信息中心，并且无法使用浏览器导航返回到该页面。

dashboard:run

可使用此操作在 iframe 中运行信息中心。此操作与点击信息中心上的运行或重新加载数据按钮的操作相同。

{
  type: "dashboard:run"
}

属性	格式	说明
type	字符串	使用 dashboard:run 类型表示您要运行信息中心。

dashboard:filters:update

使用此操作可以更新 iframe 中的现有信息中心过滤条件。您无法使用此方法向信息中心添加新的过滤条件。

{
  type: "dashboard:filters:update",
  filters: {
    "Sale date": "Last 28 days",
    "Sale amount": "Greater than 100"
  }
}

属性	格式	说明
type	字符串	使用 dashboard:filters:update 类型表示您要更新信息中心使用的过滤条件。
filters	对象	您要应用到信息中心的新过滤条件。此对象的格式为：{"Filter name 1": "value 1", "Filter name 2": "value 2", ...}

dashboard:options:set

此操作在发生 dashboard:run:complete 事件后可用，旧版信息中心内不提供。

嵌入器会创建消息并将其发送到 iframe，但信息中心只会在 dashboard:run:complete 发生后才会响应。dashboard:options:set 操作会将新值写入信息中心布局和信息中心元素属性。只有 dashboard:run:complete 事件的 options 属性中返回的属性才能使用 dashboard:options:set 进行更新。之前 dashboard:run:complete 事件的 options 属性尚未设置的所有属性都会被忽略。

{
  type: "dashboard:options:set",
  layouts: [
    {
      id: 1,
      dashboard_id: 1,
      type: "newspaper",
      active: true,
      column_width: null,
      width: null,
      deleted: false,
      dashboard_layout_components: [
        {
          id: 1,
          dashboard_layout_id: 1,
          dashboard_element_id: 1,
          row: 0,
          column: 0,
          width: 8,
          height: 4,
          deleted: false
        },
        {
          id: 2,
          dashboard_layout_id: 1,
          dashboard_element_id: 2,
          row: 0,
          column: 8,
          width: 8,
          height: 4,
          deleted: false
        }
      ]
    }
  ],
  elements: {
    1: {
      title: "Total Orders",
      title_hidden: false,
      vis_config: {
        type: "single_value",
        font_size: "medium",
        title: "Total Orders"
      }
    },
    2: {
      title: "Average Order Profit",
      title_hidden: false,
      vis_config: {
        type: "single_value",
        title: "Average Order Profit"
      }
    }
  }
}

属性	格式	说明
type	字符串	使用 dashboard:options:set 类型表示您要将新值写入信息中心布局和信息中心元素属性。
layouts	对象	dashboard:run:complete 事件中的 options 属性返回的信息中心布局属性。其格式类似于： id: "string", dashboard_id: "string", type: "newspaper", active: boolean, column_width: number, width: number
layouts.dashboard_layout_components	对象	dashboard:run:complete 事件中的 options 属性返回的一个或多个信息中心布局组件对象。其格式类似于： id: "string", dashboard_layout_id: "string", dashboard_element_id: "string", row: number, column: number, width: number, height: number, deleted: boolean,
elements	对象	dashboard:run:complete 事件中的 options 属性返回的一个或多个信息中心元素对象。其格式类似于： id: {   title: "string"

dashboard:schedule_modal:open

使用此操作打开 Scheduler，并可让用户将 Looker 内容传送到各种目的地。

旧版信息中心不提供此事件。

{
  type: "dashboard:schedule_modal:open"
}

属性	格式	说明
type	字符串	使用 dashboard:schedule_modal:open 类型表示您要打开 Schedule 对话框。

dashboard:stop

使用此操作可停止正在运行或重新加载数据的信息中心。此操作与点击信息中心上的取消按钮的操作相同。停止使用 dashboard:stop 的信息中心会发送 dashboard:run:complete 事件，并将 status: 设置为 "stopped"。

旧版信息中心不支持此操作。

{
  type: "dashboard:stop"
}

属性	格式	说明
type	字符串	使用 dashboard:stop 类型表示您要停止正在运行的信息中心。

look:run

使用此操作来运行基于 iframe 的 Look 查询。这类似于在 Look 中点击运行按钮，不同之处在于 look:run 始终直接查询数据库，并且不会从 Looker 缓存检索数据。

{
  type: "look:run"
}

属性	格式	说明
type	字符串	使用 look:run 类型表示您要运行 Look。

look:filters:update

使用此操作可以更新 iframe 中现有的“查看”滤镜。您无法使用此方法向 Look 中添加新的滤镜。

{
  type: "look:filters:update",
  filters: {
    "orders.created_at": "90 days",
    "products.department": "sweaters"
  }
}

属性	格式	说明
type	字符串	使用 look:filters:update 类型表示您要更新 Look 使用的滤镜。
filters	对象	您要应用于“外观”的新滤镜。此对象的格式为：{"view_name.field_name_1": "value 1", "view_name.field_name_1": "value 2", ...}

explore:run

使用此操作在 iframe 中运行“探索”。这类似于在“探索”中按运行按钮，不同之处在于 explore:run 始终直接查询数据库，并且不会从 Looker 缓存中检索数据。

{
  type: "explore:run"
}

属性	格式	说明
type	字符串	使用类型 explore:run 表示您要运行探索。

explore:filters:update

使用此操作可更新或移除 iframe 中的现有“探索”过滤条件。包含引用有效字段的新过滤器会将新过滤器添加到“探索”。

{
  type: "explore:filters:update",
  filters: {
    "orders.created_at": "90 days",
    "orders.status": "complete"
  }
  deleteFilters:  ["products.department"]
}

属性	格式	说明
type	字符串	使用 explore:filters:update 类型表示您要更新“探索”使用的过滤器。
filters	对象	您要应用于“探索”工具的新过滤器。如果“filters”包含“探索”中当前不存在但引用了有效字段的过滤条件，则该过滤条件将被添加到“探索”中。此对象的格式为：{"view_name.field_name_1": "value 1", "view_name.field_name_1": "value 2", ...}
deleteFilters	数组	您想从“探索”中移除的现有过滤条件。数组的格式为：["view_name.field_name_1", "view_name.field_name_2", ...]