หน้านี้ได้รับการแปลโดย Cloud Translation API

การรับส่งข้อความ iframe ของ Looker แบบฝัง

1. ก่อนเริ่มต้น

คุณควรมีเนื้อหา Looker ฝังอยู่ใน iframe ที่มีการฝังส่วนตัวหรือการฝัง SSO ใน Codelab นี้ เราจะโต้ตอบกับ iframe ของคุณผ่าน JavaScript เพื่อทำให้หน้าเว็บของคุณเป็นแบบไดนามิกมากขึ้น หน้าเว็บจะส่งและรับข้อความจากเนื้อหา Looker ที่ฝังใน iframe

ข้อกำหนดเบื้องต้น

มีอินสแตนซ์ Looker ที่ทำงานอยู่
มีแดชบอร์ด Looker ที่ฝังแบบส่วนตัวหรือฝัง SSO ภายใน iframe
ทำความเข้าใจเมธอด window.postMessage()

สิ่งที่คุณจะได้เรียนรู้

วิธีเตรียมอินสแตนซ์ iframe และ Looker สําหรับการโต้ตอบด้วย JavaScript
วิธีฟังเหตุการณ์จาก iframe ของคุณ
วิธีส่งข้อความการดำเนินการไปยัง iframe

สิ่งที่คุณต้องมี

สิทธิ์เข้าถึง HTML และ JavaScript ของโค้ดฝั่งไคลเอ็นต์ที่จัดการ iframe
สิทธิ์เข้าถึงการตั้งค่าการฝังของผู้ดูแลระบบในอินสแตนซ์ Looker

2. การเตรียมตัว

คุณต้องเตรียม iframe และอินสแตนซ์ Looker ก่อนจึงจะโต้ตอบกับ iframe ได้

เพิ่มแอตทริบิวต์ `id` ใน iframe

คุณจะต้องตรวจสอบความถูกต้องของข้อความที่มาจาก iframe โดยให้กําหนดแอตทริบิวต์ id ใน iframe ดังนี้

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

เพิ่มโดเมนของชิ้นงานลงใน`src`แอตทริบิวต์ของ iframe

ระบุโดเมนของหน้าเว็บที่โฮสต์ iframe สมมติว่า URL ของหน้าเว็บคือ https://mywebsite.com/with/embed และโดเมนของหน้าเว็บคือ https://mywebsite.com

หากคุณใช้การฝังแบบส่วนตัว ให้เพิ่มโดเมนเป็นพารามิเตอร์การค้นหา embed_domain ใน src ของ iframe ดังนี้

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

หากใช้การฝัง SSO ให้เพิ่มโดเมนเป็นพารามิเตอร์การค้นหา embed_domain ลงใน URL ฝัง

เพิ่มโดเมนของชิ้นงานในรายการที่อนุญาตในอินสแตนซ์ Looker

สุดท้าย คุณต้องเพิ่มโดเมนของแทรกในรายการที่อนุญาตในอินสแตนซ์ Looker เพื่ออนุญาตให้ส่งข้อความ

ไปที่หน้าฝังในส่วนผู้ดูแลระบบของอินสแตนซ์ Looker https://your_instance.looker.com/admin/embed

ในช่องรายการที่อนุญาตของโดเมนที่ฝัง ให้ป้อนโดเมนของชิ้นงาน หลังจากพิมพ์แล้ว ให้กดแป้น Tab เพื่อให้โดเมนปรากฏในช่อง อย่าใส่เครื่องหมายทับ / ต่อท้าย

เลือกปุ่มอัปเดต

3. ฟังข้อความเหตุการณ์จาก iframe

iframe ที่มีเนื้อหา Looker ที่ฝังไว้จะส่งข้อความไปยังหน้าเว็บที่โฮสต์ ข้อความเหตุการณ์เหล่านี้มีข้อมูลเกี่ยวกับเนื้อหา 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"); 
    }
  }
});

ข้อมูลโค้ดทําสิ่งต่อไปนี้

รอรับเหตุการณ์ "message" จากออบเจ็กต์ window
ตรวจสอบว่าพร็อพเพอร์ตี้ source ของข้อความคือ iframe ที่มีเนื้อหา Looker ฝังอยู่
ตรวจสอบพร็อพเพอร์ตี้ origin ของข้อความเป็นโดเมนของอินสแตนซ์ Looker
JSON แยกวิเคราะห์พร็อพเพอร์ตี้ data ของข้อความเพื่อเข้าถึงและแยกวิเคราะห์ออบเจ็กต์เหตุการณ์
เปลี่ยนพร็อพเพอร์ตี้ type ของออบเจ็กต์เหตุการณ์เพื่อระบุเหตุการณ์และดำเนินการกับเหตุการณ์

ตอนนี้หน้าเว็บโฮสต์จะตอบสนองต่อเหตุการณ์ที่คุณปล่อยเนื้อหา Looker ฝังไว้แบบไดนามิกได้แล้ว

4. ส่งข้อความการดำเนินการไปยัง iframe

หน้าเว็บโฮสต์ยังส่งข้อความไปยังเนื้อหา Looker ที่ฝังใน iframe ได้ด้วย ข้อความการดำเนินการเหล่านี้สามารถเปลี่ยนสถานะของเนื้อหา 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 ที่จะส่งการดําเนินการไป
เรียกใช้เมธอด postMessage() ในพร็อพเพอร์ตี้ contentWindow ของ iframe เพื่อส่งข้อความ

ตอนนี้หน้าเว็บโฮสต์สามารถเปลี่ยนสถานะของเนื้อหา Looker ที่ฝังไว้แบบไดนามิกได้แล้ว

5. ข้อมูลเพิ่มเติม

ยินดีด้วย ตอนนี้คุณสามารถรับฟังเหตุการณ์จากและส่งการดำเนินการไปยังเนื้อหา Looker ที่ฝังใน iframe ได้แล้ว ดูข้อมูลเพิ่มเติมได้จากแหล่งข้อมูลต่อไปนี้

ข้อมูลอ้างอิงเหตุการณ์ สำหรับเหตุการณ์ที่มีอยู่ทั้งหมดและพร็อพเพอร์ตี้ของเหตุการณ์
ข้อมูลอ้างอิงการกระทำสำหรับการกระทำที่ใช้ได้ทั้งหมดและพร็อพเพอร์ตี้ของการกระทำเหล่านั้น
แนวทางปฏิบัติแนะนำด้านความปลอดภัยเกี่ยวกับการฝังเนื้อหา Looker