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 Anda melalui JavaScript untuk membuat halaman web Anda lebih dinamis. Halaman web Anda akan mengirim dan menerima pesan dari konten Looker yang disematkan di 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 sematan admin di instance Looker Anda

2. Persiapan

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

Menambahkan atribut id ke iframe

Anda harus memvalidasi pesan yang berasal dari iframe. Untuk melakukannya, tentukan atribut id pada 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, maka 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.

Mengizinkan domain sematan di instance Looker

Terakhir, Anda perlu memasukkan domain sematan ke dalam daftar yang diizinkan 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 Daftar Izin Domain Sematan, masukkan domain sematan. Setelah mengetiknya, tekan tombol Tab agar domain muncul dalam kotak. Jangan sertakan garis miring di akhir /.

Pilih tombol Perbarui.

3. Memproses pesan peristiwa dari iframe

Iframe Anda dengan konten Looker yang disematkan mengirimkan pesan ke halaman web host-nya. Pesan peristiwa ini berisi informasi tepat waktu tentang konten Looker yang disematkan, seperti jika dasbor yang disematkan telah 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 akan selalu memiliki properti type yang memungkinkan Anda menentukan jenis peristiwa tersebut. Semua properti khusus peristiwa lainnya ditentukan dalam referensi peristiwa kami.

Menerima dan mengurai acara

Tambahkan ini ke tempat JavaScript halaman web Anda menginisialisasi atau mengelola iframe Anda:

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 apakah 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. Beralih ke properti type objek peristiwa untuk menentukan peristiwa apa itu dan bertindak berdasarkan peristiwa tersebut.

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

4. Mengirim pesan tindakan ke iframe

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

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. Objek ini akan selalu memiliki properti type, lalu properti khusus tindakan yang ditentukan dalam referensi tindakan kami. Pesan tindakan harus berformat JSON.

Mengirim pesan tindakan

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

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

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

5. Informasi tambahan

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