Pesan iframe Looker tersemat

1. Sebelum memulai

Anda harus menyematkan konten Looker 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 Anda yang mengelola iframe
  • Akses ke setelan penyematan admin di instance Looker Anda

2. Persiapan

Anda perlu menyiapkan iframe dan instance 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 penyematan ke atribut src iframe

Tentukan domain halaman web yang menghosting iframe. Misalnya, URL halaman web adalah https://mywebsite.com/with/embed, maka domain halaman web tersebut 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 Sisipkan 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 tersemat, seperti apakah dasbor tersemat mulai dimuat atau pengguna telah memilih opsi Download dalam konten yang disematkan. Mari kita terima dan mengurai peristiwa ini.

Memahami skema objek peristiwa

Skema objek peristiwa adalah:

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

Peristiwa akan selalu memiliki properti type yang memungkinkan Anda menentukan peristiwa tersebut. Semua properti khusus peristiwa lainnya ditentukan dalam referensi peristiwa kami.

Menerima dan mengurai peristiwa

Tambahkan ini ke tempat JavaScript halaman web Anda melakukan inisialisasi 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 apakah 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 peristiwa apa dan menindaklanjutinya.

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

4. Mengirim 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 tersemat, seperti memperbarui filter di dasbor tersemat. Mari kita buat pesan tindakan yang memberi tahu dasbor tersemat untuk menjalankan kuerinya dan mengirim pesan ke iframe Anda.

Membuat pesan tindakan

Buat pesan tindakan di dalam JavaScript halaman 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.

Mengirim 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() pada properti contentWindow iframe untuk mengirim pesan.

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

5. Informasi tambahan

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