程式碼研究室簡介
1. 事前準備
您應該將 Looker 內容嵌入 iframe 中，並採用私密嵌入或 SSO 嵌入功能。在本程式碼研究室中，我們將透過 JavaScript 與您的 iframe 互動，讓網頁更具動態性。您的網頁會收發來自 iframe 內嵌 Looker 內容的訊息，
必要條件
- 具備執行中的 Looker 執行個體
- 將 Looker 資訊主頁以私密方式嵌入或內嵌於 iframe
- 瞭解 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
在 [Embedded Domains 允許] 欄位中輸入嵌入的網域。輸入完成後，按下 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 內容的狀態！