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

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

คุณควรฝังเนื้อหา Looker ไว้ภายใน iframe ด้วยการฝังแบบส่วนตัวหรือการฝัง SSO ในโค้ดแล็บนี้ เราจะโต้ตอบกับ 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 Embedding ให้เพิ่มโดเมนเป็นพารามิเตอร์การค้นหา embed_domain ไปยัง embed 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