Pesan iframe Looker tersemat

1. Sebelum memulai

Anda harus memiliki konten Looker yang disematkan di dalam iframe dengan penyematan pribadi atau penyematan SSO. Dalam codelab ini, kita akan berinteraksi dengan iframe melalui JavaScript untuk membuat halaman web Anda lebih dinamis. Halaman web Anda akan mengirim pesan ke dan menerima pesan dari konten Looker yang disematkan iframe.

Prasyarat

Yang akan Anda pelajari

  • Cara menyiapkan iframe dan instance Looker untuk interaksi JavaScript
  • Cara memproses peristiwa dari iframe
  • Cara mengirim pesan tindakan ke iframe

Yang Anda butuhkan

  • Akses ke HTML dan JavaScript kode frontend yang mengelola iframe
  • Akses ke setelan penyematan admin di instance Looker Anda

2. Persiapan

Anda harus menyiapkan instance iframe dan Looker sebelum dapat berinteraksi dengan iframe.

Menambahkan atribut id ke iframe

Anda perlu memvalidasi pesan yang berasal dari iframe. Untuk melakukannya, tentukan atribut id di iframe:

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

Tambahkan domain sematan ke atribut src iframe

Tentukan domain halaman web yang menghosting iframe. Misalnya, URL halaman web adalah https://mywebsite.com/with/embed lalu domain halaman web adalah https://mywebsite.com.

Jika Anda menggunakan Penyematan Pribadi, di src iframe, tambahkan domain sebagai parameter kueri embed_domain:

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

Jika Anda menggunakan Penyematan SSO, tambahkan domain sebagai parameter kueri embed_domain ke URL sematan.

Menambahkan domain sematan di instance Looker yang diizinkan

Terakhir, Anda harus mengizinkan domain sematan di instance Looker untuk mengizinkan pengiriman pesan.

Buka halaman Sematkan di bagian Admin instance Looker Anda. https://your_instance.looker.com/admin/embed

Di kolom Izin Domain Sematan, masukkan domain sematan. Setelah mengetiknya, tekan tombol Tab sehingga domain muncul di dalam kotak. Jangan sertakan garis miring /.

Pilih tombol Update.

3. Memproses pesan peristiwa dari iframe

iframe Anda dengan konten Looker tersemat mengirimkan pesan ke halaman web host-nya. Pesan peristiwa ini berisi informasi tepat waktu tentang konten tampilan yang disematkan, seperti apakah dasbor tersemat mulai dimuat atau pengguna telah memilih opsi Download dalam konten yang disematkan. Mari kita terima dan uraikan peristiwa ini.

Memahami skema objek peristiwa

Skema objek peristiwa adalah:

{
  type: "...",
  eventSpecificProperty1: ...,
  eventSpecificProperty2: ...,
  ...
}

Peristiwa ini akan selalu memiliki properti type yang memungkinkan Anda menentukan peristiwanya. Semua properti khusus peristiwa lainnya ditetapkan dalam referensi peristiwa kami.

Menerima dan mengurai peristiwa

Tambahkan ini ke tempat JavaScript halaman web Anda diinisialisasi atau mengelola 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"); 
    }
  }
});

Cuplikan kode melakukan hal berikut:

  1. Memproses peristiwa "message" dari objek window.
  2. Memeriksa bahwa properti source pesan adalah iframe dengan konten Looker yang disematkan.
  3. Memeriksa bahwa properti origin pesan adalah domain instance Looker Anda.
  4. JSON mengurai properti data pesan untuk mengakses dan mengurai objek peristiwa.
  5. Mengaktifkan properti type objek peristiwa untuk menentukan peristiwanya dan menindaklanjutinya.

Sekarang halaman web host Anda dapat bereaksi secara dinamis terhadap peristiwa yang dikeluarkan oleh konten Looker tersemat Anda.

4. Kirim pesan tindakan ke iframe

Halaman host Anda juga dapat mengirim pesan ke konten Looker tersemat di iframe. Pesan tindakan ini dapat mengubah status konten Looker yang disematkan, seperti memperbarui filter di dasbor sematan. Mari kita buat pesan tindakan yang memberi tahu dasbor sematan untuk menjalankan kuerinya dan mengirimkan pesan ke iframe.

Membuat pesan tindakan

Buat pesan tindakan di dalam JavaScript halaman web Anda:

const action = { type: "dashboard:run" };
const actionJSONFormatted = JSON.stringify(action);

Objek action mengikuti format yang sama dengan objek event sebelumnya. Aplikasi tersebut akan selalu memiliki properti type, lalu properti khusus tindakan yang ditentukan dalam referensi tindakan. Pesan tindakan harus diformat JSON.

Kirim pesan tindakan

Di dalam JavaScript halaman web Anda, kirim tindakan berformat JSON ke iframe:

const iframeElement = document.getElementById("looker");
iframeElement.contentWindow.postMessage(actionJSONFormatted, 'https://instance_name.looker.com');
  1. Tentukan iframe yang akan menerima tindakan.
  2. Panggil metode postMessage() di properti contentWindow iframe untuk mengirim pesan.

Sekarang, halaman web host Anda dapat secara dinamis mengubah status konten Looker yang disematkan.

5. Informasi tambahan

Selamat! Anda kini dapat memproses peristiwa dari dan mengirim tindakan ke konten Looker tersemat di iframe Anda. Lihat beberapa referensi berikut ini untuk informasi lebih lanjut: