1. 事前準備
您應將 Looker 內容嵌入 iframe 中，並使用私人嵌入或單一登入 (SSO) 嵌入功能。在本程式碼研究室中，我們會透過 JavaScript 與 iframe 互動，讓網頁更具動態性。網頁會向 iframe 嵌入的 Looker 內容傳送訊息，並接收該內容傳送的訊息。
必要條件
- 有執行中的 Looker 執行個體
- 在 iframe 中私人嵌入 Looker 資訊主頁，或以單一登入 (SSO) 嵌入
- 瞭解 window.postMessage() 方法
課程內容
- 如何為 iframe 和 Looker 執行個體做好與 JavaScript 互動的準備
- 如何監聽 iFrame 中的事件
- 如何將動作訊息傳送至 iframe
軟硬體需求
- 存取管理 iframe 的前端程式碼 HTML 和 JavaScript
- 可存取 Looker 執行個體中的管理員嵌入設定
2. 準備事項
請先備妥 iframe 和 Looker 執行個體，才能與 iframe 互動。
在 iframe 中加入 id 屬性
您需要驗證來自 iframe 的郵件。方法是在 iframe 上定義 id 屬性：
<iframe
id="looker"
src="https://instance_name.looker.com/embed/dashboards/1"
>
</iframe>
將嵌入網域新增至 iframe 的 src 屬性
判斷代管 iframe 的網頁網域。假設該網頁的網址為 https://mywebsite.com/with/embed，則該網頁網域為 https://mywebsite.com。
如果您使用私人嵌入功能，請在 iframe 的 src 中，將網域新增為 embed_domain 查詢參數：
<iframe
id="looker"
src="https://instance_name.looker.com/embed/dashboards/1?embed_domain=https://mywebsite.com"
>
</iframe>
如果您使用 SSO 嵌入功能，請將網域加入嵌入網址做為 embed_domain 查詢參數。
將嵌入網域加入 Looker 執行個體中的許可清單
最後，您需要在 Looker 例項中將內嵌網域加入許可清單，才能傳送訊息。
前往 Looker 執行個體「管理」專區中的「嵌入」頁面。https://your_instance.looker.com/admin/embed
在「嵌入網域允許清單」欄位中輸入嵌入網域的網域。輸入完成後，按下 Tab 鍵，網域就會出現在方塊中。結尾不得為斜線 /。
選取「更新」按鈕。
3. 監聽來自 iframe 的事件訊息
嵌入 Looker 內容的 iframe 會傳送訊息給主機網頁。這些「事件」訊息包含嵌入式 Looker 內容的相關即時資訊，例如內嵌資訊主頁已開始載入，或是使用者已在嵌入內容中選取「下載」選項。讓我們接收並剖析這些事件。
瞭解事件物件結構定義
事件物件的結構定義如下：
{
type: "...",
eventSpecificProperty1: ...,
eventSpecificProperty2: ...,
...
}
該事件一律都會有 type 屬性，可讓您判斷事件為何。如需其他事件專屬屬性的定義，請參閱事件參考資料。
接收並剖析事件
將以下程式碼新增至網頁的 JavaScript 初始化或管理 iframe 的位置：
window.addEventListener("message", function(message) {
const iframeElement = document.getElementById("looker");
if (message.source === iframeElement.contentWindow) {
if (message.origin === "https://instance_name.looker.com") {
const event = JSON.parse(message.data);
switch (event.type):
case "dashboard:run:start":
console.log("The embedded dashboard has started loading");
}
}
});
程式碼片段會執行以下作業：
- 監聽
window物件的"message"事件。 - 檢查訊息的
source屬性是含有嵌入式 Looker 內容的 iframe。 - 檢查訊息的
origin屬性是否為 Looker 執行個體的網域。 - JSON 會剖析訊息的
data屬性，以存取及剖析事件物件。 - 在事件物件的
type屬性上進行切換，以判斷其事件並對其採取行動。
這樣一來，主機網頁就能動態回應嵌入的 Looker 內容所發出的事件！
4. 將操作訊息傳送至 iframe
主機網頁也可以將訊息傳送至 iframe 的嵌入 Looker 內容。這些動作訊息可變更嵌入式 Looker 內容的狀態，例如更新嵌入式資訊主頁的篩選器。接下來，我們要建立動作訊息，告知嵌入的資訊主頁執行查詢並將訊息傳送至您的 iframe。
建立動作訊息
在網頁的 JavaScript 中建立動作訊息：
const action = { type: "dashboard:run" };
const actionJSONFormatted = JSON.stringify(action);
action 物件遵循與前一個 event 物件相同的格式。這個物件一律會包含 type 屬性，以及在動作參考資料中定義的動作專屬屬性。動作訊息必須採用 JSON 格式。
傳送動作訊息
在網頁的 JavaScript 中，將 JSON 格式的動作傳送至 iframe：
const iframeElement = document.getElementById("looker");
iframeElement.contentWindow.postMessage(actionJSONFormatted, 'https://instance_name.looker.com');
- 決定要傳送動作的 iframe。
- 對 iframe 的
contentWindow屬性呼叫postMessage()方法，即可傳送訊息。
代管網頁現在可以動態變更嵌入式 Looker 內容的狀態！
5. 其他資訊
恭喜！您現在可以監聽 iframe 嵌入 Looker 內容的事件，並傳送動作至該內容。詳情請參閱下列資源：