หน้านี้ได้รับการแปลโดย 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

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

<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

ในช่อง Embedded Domain Allowlis ให้ป้อนโดเมนของการฝัง หลังจากพิมพ์แล้ว ให้กดปุ่ม 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 ที่ฝัง เช่น อัปเดตตัวกรองในหน้าแดชบอร์ดแบบฝัง ลองสร้างข้อความ action ที่บอกหน้าแดชบอร์ดที่ฝัง ให้เรียกใช้การค้นหาและส่งข้อความไปยัง 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