嵌入的 JavaScript 事件

创建嵌入内容(可以公开、私密、使用签名嵌入或通过 API 完成)后,您可以使用 JavaScript 与这些 iframe 进行交互。您可以根据嵌入项的状态使网页更具动态性,甚至可以从网页中更改嵌入项。

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

您可以通过以下任一方式在 Looker 嵌入式内容中使用 JavaScript:

准备工作

在与嵌入式 iframe 互动之前,请按以下步骤操作:

向 iframe 添加 ID

之后,当您从 iframe 中检索数据时,您需要验证所处理的信息是否确实来自 Looker 的 iframe。为方便起见,请务必为 iframe 添加 ID(如果您尚未添加)。在以下示例中,您通过向 iframe 添加 id="looker",将 ID 设置为 looker:

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

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

在 iframe 的 src 属性中,添加使用 iframe 的网域。在以下示例中,您可以在 src 属性中将 ?embed_domain=https://myownpersonaldomain.com" 添加到网址末尾,从而将 myownpersonaldomain.com 指定为网域:

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

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

如果您使用的是嵌入 SDK,请将 sdk=3 添加到嵌入网址的末尾。sdk=3 参数表示 SDK 存在,并且 Looker 可以利用 SDK 提供的其他功能,例如在 Looker iframe 和您的网域之间传递 JavaScript 事件。SDK 本身无法添加此参数,因为它是签名网址的一部分。例如:

<iframe
  id="looker"
  src="https://instance_name.looker.com/embed/dashboards/1?embed_domain=https://myownpersonaldomain.com&sdk=2">
</iframe>

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

最后,您需要按照以下步骤,将使用 iframe 的网域添加到 Looker 管理面板的嵌入页面上的许可清单中:

  1. 在嵌入式网域许可清单字段中,输入使用 iframe 的网域,然后按 Tab 键,使该网域显示在字段内的框中。

  2. 点击更新。

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

如果您在 Looker 23.8 或更高版本中使用无 Cookie 嵌入,则可以在获取无 Cookie 会话时指定嵌入网域。除了使用管理 > 嵌入面板将嵌入网域添加到许可清单之外,您还可以使用此方法。如果您决定利用此功能,请查看安全最佳实践。

从 iframe 检索数据

完成准备步骤后,您可以通过监听 postMessage 事件来访问在 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:edit:start 22.20 版新增功能 信息中心已切换到修改模式。成功保存信息中心后,系统会触发 dashboard:save:complete 事件。
dashboard:edit:cancel 22.20 版新增 处于修改模式的信息中心已退出修改模式,但未保存。
dashboard:save:complete 信息中心已修改并保存。
dashboard:delete:complete 已删除一个信息中心。
dashboard:tile:start 图块已开始加载或查询数据。
dashboard:tile:complete 图块已完成查询。
dashboard:tile:download 图块的数据已开始下载。
dashboard:tile:explore 用户点击了信息中心图块中的从此处探索选项。
dashboard:tile:merge 25.14 版新增 用户点击了“修改合并的查询”按钮或菜单项。
dashboard:tile:view 用户点击了信息中心图块中的查看原始 Look 选项。
dashboard:filters:changed 信息中心的过滤条件已应用或更改。
look:ready Look 已开始加载查询数据,无论查询是否会运行。
look:run:start Look 已开始加载查询数据,并且查询已开始运行。
look:run:complete Look 已完成查询。
look:edit:start 25.10 中添加 Look 已切换到修改模式。保存 Look 时,系统会触发 look:save:complete 事件。
look:edit:cancel 25.10 中新增 处于修改模式的 Look 已退出修改模式,但未保存。
look:save:complete 已修改并保存 Look。
look:delete:complete 一个 Look 已移至回收站文件夹。
drillmenu:click 用户点击了使用 link LookML 参数创建的信息中心内的展开菜单。
drillmodal:download 用户从信息中心图块打开了展开细目对话框,并点击了下载选项。
drillmodal:explore 用户点击了展开对话框中的从这里开始探索选项。
explore:ready 无论查询是否会运行,探索都已开始加载查询数据。
explore:run:start 探索已开始加载查询数据,并且查询已开始运行。
explore:run:complete 探索已完成查询运行。
explore:state:changed 由于用户的操作,“探索”页面网址已更改。
merge:ready 合并查询已完成初始查询数据的加载。
merge:run:start 合并查询已开始运行。
merge:run:complete 合并查询已完成运行。
merge:run:fail 合并查询未能运行并返回了错误。
page:changed 用户已在 iframe 中导航到新页面。
page:properties:changed 信息中心 iframe 的高度已更改。
session:tokens Looker 客户端需要令牌才能继续。
session:expired 25.10 中添加 用户的会话已过期。
session:status 发送有关会话状态的信息。
env:client:dialog 系统已打开一个对话框,该对话框可能部分超出视图范围,例如钻取对话框。此事件使托管应用能够将对话框滚动到视图中。

事件类型参考

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

dashboard:loaded

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


type: "dashboard:loaded",
status: "complete",
dashboard: {
  id: 1,
  title: "Business Pulse",
  canEdit: true,
  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.canEdit 布尔值 添加于 22.20 如果为 true,则用户可以修改信息中心。
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",
  canEdit: true,
  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.title 字符串 标题,显示在信息中心顶部。
dashboard.canEdit 布尔值 添加于 22.20 如果为 true,则用户可以修改信息中心。
dashboard.url 字符串 相对信息中心网址(仅路径)。
dashboard.absoluteUrl 字符串 完整的信息中心网址。
dashboard.dashboard_filters 对象 应用于信息中心的过滤条件。此对象的格式为:{"Filter name 1": "value 1", "Filter name 2": "value 2", ...}

dashboard:run:complete

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

type: "dashboard:run:complete",
status: "complete",
dashboard: {
  id: 23,
  title: "My Dashboard",
  canEdit: true,
  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.title 字符串 标题,显示在信息中心顶部。
dashboard.canEdit 布尔值 添加于 22.20 如果为 true,则用户可以修改信息中心。
dashboard.url 字符串 相对信息中心网址(仅路径)。
dashboard.absoluteUrl 字符串 完整的信息中心网址。
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",
  canEdit: true,
  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.title 字符串 标题,显示在信息中心顶部。
dashboard.canEdit 布尔值 添加于 22.20 如果为 true,则用户可以修改信息中心。
dashboard.url 字符串 相对信息中心网址(仅路径)。
dashboard.absoluteUrl 字符串 完整的信息中心网址。
dashboard.dashboard_filters 对象 应用于信息中心的过滤条件。此对象的格式为:{"Filter name 1": "value 1", "Filter name 2": "value 2", ...}
fileFormat 字符串 下载的信息中心的格式(目前仅支持 "pdf")。

dashboard:edit:start

22.20 版中新增 当信息中心切换到修改模式时,系统会创建此事件。

type: "dashboard:edit:start",
dashboard: {
  id: 23,
  title: "My Dashboard",
  canEdit: true,
  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.title 字符串 标题,显示在信息中心顶部。
dashboard.canEdit 布尔值 添加于 22.20 如果为 true,则用户可以修改信息中心。
dashboard.url 字符串 相对信息中心网址(仅路径)。
dashboard.absoluteUrl 字符串 完整的信息中心网址。
dashboard.dashboard_filters 对象 应用于信息中心的过滤条件。此对象的格式为:{"Filter name 1": "value 1", "Filter name 2": "value 2", ...}

dashboard:edit:cancel

添加于 22.20 当处于修改模式的信息中心在未保存的情况下退出修改模式时,系统会创建此事件。

type: "dashboard:edit:cancel",
dashboard: {
  id: 23,
  title: "My Dashboard",
  canEdit: true,
  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.title 字符串 标题,显示在信息中心顶部。
dashboard.canEdit 布尔值 添加于 22.20 如果为 true,则用户可以修改信息中心。
dashboard.url 字符串 相对信息中心网址(仅路径)。
dashboard.absoluteUrl 字符串 完整的信息中心网址。
dashboard.dashboard_filters 对象 应用于信息中心的过滤条件。此对象的格式为:{"Filter name 1": "value 1", "Filter name 2": "value 2", ...}

dashboard:save:complete

此事件在信息中心经过修改并保存后创建。

type: "dashboard:save:complete",
dashboard: {
  id: 23,
  title: "My Dashboard",
  canEdit: true,
  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.canEdit 布尔值 添加于 22.20 如果为 true,则用户可以修改信息中心。
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",
  canEdit: true,
  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.canEdit 布尔值 添加于 22.20 如果为 true,则用户可以修改信息中心。
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",
  canEdit: true,
  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.title 字符串 信息中心标题,显示在功能块所属信息中心的顶部。
dashboard.canEdit 布尔值 添加于 22.20 如果为 true,则用户可以修改信息中心。
dashboard.url 字符串 图块所属信息中心的相对网址(仅路径)。
dashboard.absoluteUrl 字符串 图块所属信息中心的完整网址。
dashboard.dashboard_filters 对象 应用于图块所属信息中心的过滤条件。此对象的格式为:{"Filter name 1": "value 1", "Filter name 2": "value 2", ...}
tile.id 整数 事件(而非图块)的 ID 编号。
tile.title 字符串 图块标题,显示在图块顶部。
tile.listen 对象 此图块正在监听的全局信息中心过滤条件。此对象的格式为:{"Filter Label": "Filter Field", ...}

dashboard:tile:complete

此事件会在图块完成查询运行时创建。

type: "dashboard:tile:complete",
dashboard: {
  id: 23,
  title: "My Dashboard",
  canEdit: true,
  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.title 字符串 信息中心标题,显示在功能块所属信息中心的顶部。
dashboard.canEdit 布尔值 添加于 22.20 如果为 true,则用户可以修改信息中心。
dashboard.url 字符串 图块所属信息中心的相对网址(仅路径)。
dashboard.absoluteUrl 字符串 图块所属信息中心的完整网址。
dashboard.dashboard_filters 对象 应用于图块所属信息中心的过滤条件。此对象的格式为:{"Filter name 1": "value 1", "Filter name 2": "value 2", ...}
status 字符串 图块查询是否已成功完成。可能的值为 "complete" 或 "error"。
truncated 布尔值 图块查询结果是否因查询返回的行数超过查询行数上限而被截断。行数上限可以是用户指定的行数上限,也可以是 Looker 默认的行数上限(5,000 行)。
tile.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",
  canEdit: true,
  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.title 字符串 信息中心标题,显示在功能块所属信息中心的顶部。
dashboard.canEdit 布尔值 添加于 22.20 如果为 true,则用户可以修改信息中心。
dashboard.url 字符串 图块所属信息中心的相对网址(仅路径)。
dashboard.absoluteUrl 字符串 图块所属信息中心的完整网址。
dashboard.dashboard_filters 对象 应用于图块所属信息中心的过滤条件。此对象的格式为:{"Filter name 1": "value 1", "Filter name 2": "value 2", ...}
tile.id 整数 事件(而非图块)的 ID 编号。
tile.title 字符串 图块标题,显示在图块顶部。
tile.listen 对象 此图块正在监听的全局信息中心过滤条件。此对象的格式为:{"Filter Label": "Filter Field", ...}
fileFormat 字符串 下载的图块的格式(目前仅支持 "pdf")。

dashboard:tile:explore

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

此事件可取消,这意味着嵌入应用可以返回 {cancel: true},而 Looker 不会继续执行触发事件。

type: "dashboard:tile:explore",
label: 'Explore From Here',
url: '/embed/explore/model/view...',
dashboard: {
  id: 23,
  title: "My Dashboard",
  canEdit: true,
  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.title 字符串 信息中心标题,显示在功能块所属信息中心的顶部。
dashboard.canEdit 布尔值 添加于 22.20 如果为 true,则用户可以修改信息中心。
dashboard.url 字符串 图块所属信息中心的相对网址(仅路径)。
dashboard.absoluteUrl 字符串 图块所属信息中心的完整网址。
dashboard.dashboard_filters 对象 应用于图块所属信息中心的过滤条件。此对象的格式为:{"Filter name 1": "value 1", "Filter name 2": "value 2", ...}
tile.id 整数 事件(而非图块)的 ID 编号。
tile.title 字符串 图块标题,显示在图块顶部。
tile.listen 对象 此图块正在监听的全局信息中心过滤条件。此对象的格式为:{"Filter Label": "Filter Field", ...}

dashboard:tile:view

当用户点击信息中心图块中的查看原始 Look 选项时,系统会创建此事件。

此事件可取消,这意味着嵌入应用可以返回 {cancel: true},而 Looker 不会继续执行触发事件。

type: "dashboard:tile:view",
label: 'View Original Look',
url: '/embed/look/...',
dashboard: {
  id: 23,
  title: "My Dashboard",
  canEdit: true,
  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.title 字符串 信息中心标题,显示在功能块所属信息中心的顶部。
dashboard.canEdit 布尔值 添加于 22.20 如果为 true,则用户可以修改信息中心。
dashboard.url 字符串 图块所属信息中心的相对网址(仅路径)。
dashboard.absoluteUrl 字符串 图块所属信息中心的完整网址。
dashboard.dashboard_filters 对象 应用于图块所属信息中心的过滤条件。此对象的格式为:{"Filter name 1": "value 1", "Filter name 2": "value 2", ...}
tile.id 整数 事件(而非图块)的 ID 编号。
tile.title 字符串 图块标题,显示在图块顶部。
tile.listen 对象 此图块正在监听的全局信息中心过滤条件。此对象的格式为:{"Filter Label": "Filter Field", ...}

dashboard:tile:merge

添加于 25.14 当用户点击修改合并查询按钮或修改合并查询菜单项时,系统会生成此事件。此按钮的默认行为是打开一个新的顶级窗口,以便修改合并查询。

此事件可取消,这意味着嵌入应用可以返回 {cancel: true},而 Looker 不会继续执行触发事件。此事件允许嵌入应用在 iframe(而非顶级窗口)中打开合并查询编辑器。嵌入应用不应尝试在触发事件的 iframe 中加载网址。而是应该创建一个新的 iframe。

javascript type: dashboard:tile:merge, label: 'Edit Merged Query', dashboard_id: '13', dashboard_modified: false, tile_id: '218', tile_title: 'Untitled', url: '/embed/merge/edit?did=218&dbnx=1', absoluteUrl: 'https://.../embed/merge/edit?did=218&dbnx=1', target: '_blank',
属性 格式 说明
label 字符串 按钮标签。
dashboard_id 字符串 合并查询图块所属的信息中心的 ID。
dashboard_modified 布尔值 如果为 true,则此属性表示信息中心已被修改。如果继续修改合并查询,信息中心的更新可能会丢失。嵌入式应用可以取消合并查询修改,也可以警告用户,如果继续操作,可能会丢失未保存的更改。
tile_id 字符串 合并查询图块的 ID。
tile_title 字符串 图块的标题。
url 字符串 合并查询的网址。此属性可与嵌入 SDK 搭配使用,为合并后的查询创建新的 iframe。
absoluteUrl 字符串 合并查询的完整网址。此属性可用作 iframe 元素的 src。需要提供其他属性。
target 字符串 要打开的窗口的名称所使用的 ID。

dashboard:filters:changed

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

type: "dashboard:filters:changed",
dashboard: {
  id: 23,
  title: "My Dashboard",
  canEdit: true,
  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.title 字符串 标题,显示在信息中心顶部。
dashboard.canEdit 布尔值 添加于 22.20 如果为 true,则用户可以修改信息中心。
dashboard.url 字符串 相对信息中心网址(仅路径)。
dashboard.absoluteUrl 字符串 完整的信息中心网址。
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 网址(仅路径)
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 网址(仅路径)
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 网址(仅路径)
look.absoluteUrl 字符串 完整 Look 网址

look:edit:start

25.10 版新增 当 Look 切换到修改模式时,系统会触发此事件。

type: "look:edit:start",
look: {
  id: 46,
  title: "My Look",
  url: "/embed/looks/46",
  absoluteUrl: "https://instance_name.looker.com/embed/looks/46",
}
属性 格式 说明
look.id 字符串 Look 的 ID。
look.title 字符串 Look 的标题。
url 字符串 Look 的相对网址(仅路径)。
absoluteUrl 字符串 完整的 Look 网址。

look:edit:cancel

25.10 版新增 当处于修改模式的 Look 退出修改模式且未保存时,会触发此事件。

type: "look:edit:cancel",
look: {
  id: 46,
  title: "My Look",
  url: "/embed/looks/46",
  absoluteUrl: "https://instance_name.looker.com/embed/looks/46",
}
属性 格式 说明
look.id 字符串 Look 的 ID。
look.title 字符串 Look 的标题。
url 字符串 Look 的相对网址(仅路径)。
absoluteUrl 字符串 完整的 Look 网址。

look:save:complete

此事件会在修改并保存 Look 时创建。当用户执行以下任一任务时,系统会创建此事件:

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

type: look:save:complete
look: {
  url: "/embed/looks/...",
  absoluteUrl: "https://instance_name.looker.com/embed/looks/...",
  folderid: 123
  }
属性 格式 说明
look.url 字符串 相对 Look 网址(仅路径)
look.absoluteUrl 字符串 完整 Look 网址
look.folderid 整数 存储 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 网址(仅路径)
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: ' '

此事件可取消,这意味着嵌入应用可以返回 {cancel: true},而 Looker 不会继续执行触发事件。

属性 格式 说明
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

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

此事件可取消,这意味着嵌入应用可以返回 {cancel: true},而 Looker 不会继续执行触发事件。

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 字符串 完整探索网址

merge:ready

当合并查询完成初始查询数据的加载时,系统会创建此事件。

{
  type: "merge:ready",
  mergeQuery: {
    id: "123",
    client_id: "abc"
  }
}
属性 格式 说明
mergeQuery.id 字符串 合并查询的 ID。
mergeQuery.client_id 字符串 合并查询的客户端 ID。

merge:run:start

此事件会在合并查询开始运行时创建。

{
  type: "merge:run:start",
  mergeQuery: {
    id: "123",
    client_id: "abc"
  }
}
属性 格式 说明
mergeQuery.id 字符串 合并查询的 ID。
mergeQuery.client_id 字符串 合并查询的客户端 ID。

merge:run:complete

此事件会在合并查询完成运行后创建。

{
  type: "merge:run:complete",
  mergeQuery: {
    id: "123",
    client_id: "abc"
  }
}
属性 格式 说明
mergeQuery.id 字符串 合并查询的 ID。
mergeQuery.client_id 字符串 合并查询的客户端 ID。

merge:run:fail

当合并查询无法运行并返回错误时,系统会创建此事件。

{
  type: "merge:run:fail",
  mergeQuery: {
    id: "123",
    client_id: "abc"
  },
  error: "Execution timeout"
}
属性 格式 说明
mergeQuery.id 字符串 合并查询的 ID。
mergeQuery.client_id 字符串 合并查询的客户端 ID。
error 字符串 合并查询无法运行时返回的出错提示。

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 的高度发生变化时,系统会创建此事件。此参数不适用于 Look 或探索,因为这些项会自动调整其高度以适应 iframe 的大小。

type: "page:properties:changed",
height: 1000
属性 格式 说明
height 整数 信息中心 iframe 的高度(以像素为单位)

session:tokens

此事件表示 Looker 客户端需要令牌才能继续。此事件会在 iframe 创建后立即创建,并在会话期间定期创建。

{
  "type": "session:tokens",
  "api_token": "eyJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwczovL3NlbGYtc2lnbmVkLmxvb2tlci5jb206OTk5OSIsImV4cCI6MTY3MDYyNjMzMCwic3ViIjoiYVdrNWFGUzM4RnRwNzFFWXhuS3ZaMXdKRmV3ZjB2VzYtTV9zLWtCcHE1dXIiLCJ0b2tlbl90eXBlIjoiYXBpX3Rva2VuIiwicmFuZG9taXplciI6IkxjYnpOeDNTVjNOb3o3UVlqTVJjNmhlMkdodjh1a2UwWUhiZWNRMHVCYm1KIn0.CBv1__QGc_H7bKNe31SHMMQCsc5ya1xOiEv1UDWAyxM",
  "api_token_ttl": 463,
  "navigation_token": "eyJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwczovL3NlbGYtc2lnbmVkLmxvb2tlci5jb206OTk5OSIsImV4cCI6MTY3MDYyNjMzMCwic3ViIjoiYVdrNWFGUzM4RnRwNzFFWXhuS3ZaMXdKRmV3ZjB2VzYtTV9zLWtCcHE1dXIiLCJ0b2tlbl90eXBlIjoibmF2aWdhdGlvbl90b2tlbiIsInJhbmRvbWl6ZXIiOiJHVVNlc00tdTRPRDlNdktodFJDU2pEcVFhUkJNeTh5dm42Q1FDUXhuLTNxMiJ9.sWo7LUEI5LeragVmeDamUR7u2myXpFJ0aqK_IIALUqI",
  "navigation_token_ttl": 463,
  "session_reference_token_ttl": 2924
}
属性 格式 说明
authentication_token 字符串 身份验证令牌。在创建 iframe 时添加。如果请求是生成令牌,或者会话已过期,则响应中不包含此字段。
authentication_token_ttl 数字 身份验证令牌的存留时间(以秒为单位)。在创建 iframe 时添加。如果请求是生成令牌,或者会话已过期,则响应中不包含此字段。
api_token 字符串 API 令牌。如果会话已过期,则不包含此字段。
api_token_ttl 数字 API 令牌存留时间(以秒为单位)。如果会话已过期,则不包含此字段。
navigation_token 字符串 导航令牌。如果会话已过期,则不包含此字段。
navigation_token_ttl 数字 导航令牌的存留时间(以秒为单位)。如果会话已过期,则不包含此字段。
session_references_token_ttl 数字 会话存留时间(以秒为单位)。会话过期后,该值将为 0。如需恢复,嵌入应用必须获取新会话。

session:expired

添加了 25.10 当嵌入用户的会话过期时,系统会触发此事件。

type: "session:expired",

此事件没有载荷。

session:status

当嵌入式 Looker 应用处理会话令牌请求时,系统会生成该事件。

{
  "type": "session:status",
  "session_ttl": 0,
  "expired": true,
  "interrupted": false
}
属性 格式 说明
session_ttl 数字 会话存留时间(以秒为单位)。
expired 布尔值 如果为 true,则表示会话已过期。
interrupted 布尔值 如果为 true,则表示对会话令牌的请求未得到响应。这可能表示服务器暂时不可用。
recoverable 布尔值 仅在 interrupted 为 true 时填充。指示会话是否可以恢复。值为 false 可能意味着嵌入应用存在问题。

env:client:dialog

当打开的对话框可能部分超出视图范围(例如展开对话框)时,系统会生成此事件。此事件使托管应用能够通过 env:host:scroll 操作将对话框滚动到视图中。

{
  type: "env:client:dialog",
  dialogType: 'drilling',
  placement: 'cover',
  open: true
}
属性 格式 说明
type 字符串 env:client:dialog 表示对话框已打开或关闭。目前仅支持下钻对话框,但未来可能会添加其他对话框。由于深入分析对话框会覆盖 iframe 视口,因此深入分析对话框的顶部可能不在视图中。此事件允许宿主应用将对话框顶部滚动到视图中。
dialogType 字符串 对话框的类型。只有打开或关闭“钻取”对话框类型才会触发此事件。
placement 字符串 对话框的放置位置。类型为“drilling”的对话框始终使用“cover”placement。
open 布尔值 指明对话框是已打开还是已滚动。

更改 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');

操作摘要表

下表总结了这些操作。选择一项操作,即可查看该操作的相关详情。

操作 操作说明
page:load 在 iframe 中加载新页面,替换现有页面。
dashboard:load 在 iframe 中加载新信息中心,替换现有信息中心。
dashboard:run 在 iframe 中运行信息中心。
dashboard:edit 22.20 版中新增 将信息中心切换到修改模式。
dashboard:filters:update 更新 iframe 中的现有信息中心过滤条件。
dashboard:options:set 向信息中心布局和信息中心元素属性写入新值。
dashboard:schedule_modal:open 打开 Scheduler,让用户可以将 Looker 内容发送到各种目标位置。
dashboard:stop 停止正在运行或重新加载数据的信息中心。
look:run 在 iframe 中运行 Look。
look:filters:update 更新 iframe 中的现有 Look 过滤条件。
explore:run 在 iframe 中运行“探索”。
explore:filters:update 更新或移除 iframe 中的现有探索过滤条件。
merge:run 在 iframe 中运行合并查询。
session:tokens:request 发送令牌以响应 session:tokens:request 事件。
env:host:scroll 将宿主 iframe 的当前滚动位置信息发送到嵌入式 Looker 应用。

操作参考

您可以向嵌入式 iframe 发布以下可用操作:

page:load

使用此操作可导航到 iframe 中的新内容,并替换现有内容。此操作与 dashboard:load 操作类似,但更灵活,因为可以在网址中指定其他参数。

在使用 page:load 之前,应考虑行为上的差异。如果当前信息中心正在修改,dashboard:load 将阻止导航。page:load 不会阻止导航。托管应用可以通过跟踪 dashboard:edit:start、look:edit:start 及其对应的修改结束事件,来确定是否正在修改信息中心或 Look。因此,我们建议使用嵌入 SDK。嵌入 SDK 会跟踪信息中心或 Look 是否正在修改,因此可以查询连接,以查看在导航之前是否正在修改内容。

{
    type: 'page:load',
    url: '/embed/dashboard/32?state=california,
    pushHistory: false
}
属性 格式 说明
type 字符串 使用类型 page:load 表示您希望将新内容加载到 iframe 中。
url 字符串 要加载的内容的网址。
pushHistory 布尔值 如果为 true,则加载的内容会创建新的浏览器浏览记录条目,用户可以使用浏览器的返回按钮返回到之前的内容。如果为 false,则当前内容会被替换,并且无法使用浏览器导航返回到该内容。

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:edit

22.20 版中新增 使用此操作可将 iframe 中的现有信息中心切换到修改模式。此操作与从信息中心菜单中选择修改信息中心相同。

{
  type: "dashboard:edit"
}
属性 格式 说明
type 字符串 使用类型 dashboard:edit 表示您希望将信息中心切换到修改模式。

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",

  title_hidden: boolean,

  vis_config: {

    type: "string", title: "string"

  }

}

dashboard:schedule_modal:open

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

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

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 过滤条件。您无法使用此方法向 Look 添加新过滤条件。

{
  type: "look:filters:update",
  filters: {
    "orders.created_at": "90 days",
    "products.department": "sweaters"
  }
}
属性 格式 说明
type 字符串 使用类型 look:filters:update 表示您要更新 Look 使用的过滤条件。
filters 对象 您要应用于 Look 的新过滤条件。此对象的格式为:{"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", ...]

merge:run

使用此操作可在 iframe 中运行合并查询。

{
  type: "merge:run"
}
属性 格式 说明
type 字符串 使用类型 merge:run 表示您要运行合并查询。

session:tokens:request

使用此操作可发送令牌以响应 session:tokens:request 请求。

{
  type: "session:tokens:request",
}
属性 格式 说明
type 字符串 使用类型 session:tokens:request 表示您希望发送令牌来响应 session:tokens:request 事件。

env:host:scroll

使用此操作可将主机 iframe 的当前滚动位置信息发送到嵌入式 Looker 应用。

{
  type: "env:host:scroll",
  offsetTop: 10,
  offsetLeft: 10,
  scrollX: 5,
  scrollY: 5
}
属性 格式 说明
type 字符串 使用类型 env:host:scroll 表示您希望将有关宿主 iframe 当前滚动位置的信息发送到嵌入式 Looker 应用。
offsetTop 数字 iframe 的顶部偏移量。
offsetLeft 数字 iframe 的左侧偏移量。
scrollX 数字 应用主机的 scrollX 位置。
scrollY 数字 应用宿主的 scrollY 位置。