嵌入的 JavaScript 事件

建立嵌入項目後 (可公開、私下、使用已簽署的嵌入項目或透過 API 建立)，您可以使用 JavaScript 與這些 iframe 互動。您可以根據嵌入項目的狀態，讓網頁更靈活多元，甚至可以從網頁變更嵌入項目。

請注意，Looker 無法控制瀏覽器將事件調度至網頁應用程式的順序。也就是說，事件順序在不同瀏覽器或平台之間可能不一致。請務必正確編寫 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. 按一下「Update」。

您可以在許可清單中使用 * 萬用字元建立網域模式。例如，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 當使用者點選「Edit Merged Query」按鈕或「Edit Merged Query」選單項目時，系統會產生這項事件。這個按鈕的預設行為是開啟新的頂層視窗，以便編輯合併查詢。

這項事件可以取消，也就是說，嵌入應用程式可以傳回 {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，然後點選「儲存」
  • 依序點選「儲存」 >「另存新檔…」選單選項，儲存 Look 圖表
  • 將 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 的高度變更時，系統會建立這項事件。圖表和探索會自動調整高度，以符合 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 開啟排程器，讓使用者將 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

這項動作可開啟排程器，讓使用者將 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 圖表的「執行」Run按鈕類似，但 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 位置。