Yerleşik Looker iframe mesajlaşması

1. Başlamadan önce

Looker içeriğini, gizli yerleştirme veya SSO yerleştirme ile bir iFrame'e yerleştirmiş olmanız gerekir. Bu codelab'de, web sayfanızı daha dinamik hale getirmek için JavaScript üzerinden iframe'inizle etkileşime geçeceğiz. Web sayfanız, iframe'in yerleştirilmiş Looker içeriğine mesaj gönderir ve bu içerikten mesaj alır.

Ön koşullar

Neler öğreneceksiniz?

  • JavaScript etkileşimi için iframe ve Looker örneğinizi hazırlama
  • iframe'inizdeki etkinlikleri dinleme
  • iFrame'inize işlem mesajları gönderme

Gerekenler

  • Kullanıcı arabirimi kodunuzun, iFrame'i yöneten HTML ve JavaScript'ine erişim
  • Looker örneğinizdeki yönetici yerleştirme ayarlarına erişim

2. Hazırlıklar

iFrame ile etkileşimde bulunabilmek için önce iFrame ve Looker örneğinizi hazırlamanız gerekir.

iframe'e id özelliği ekleme

Iframe'den gelen mesajları doğrulamanız gerekir. Bunu yapmak için iframe'de bir id özelliği tanımlayın:

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

Yerleştirmenin alanını iframe'in src özelliğine ekleyin

iFrame'i barındıran web sayfasının alanını belirleyin. Web sayfasının URL'si https://mywebsite.com/with/embed, ardından web sayfasının alan adının https://mywebsite.com olduğunu varsayalım.

Gizli Yerleştirme kullanıyorsanız iframe'in src'sine alan adını bir embed_domain sorgu parametresi olarak ekleyin:

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

TOA Yerleştirme özelliğini kullanıyorsanız alan adını yerleştirme URL'sine embed_domain sorgu parametresi olarak ekleyin.

Looker örneğinde yerleştirmenin alanını izin verilenler listesine ekleyin

Son olarak, mesaj göndermeye izin vermek için Looker örneğinizde yerleşik öğenin alanını izin verilenler listesine eklemeniz gerekir.

Looker örneğinizin Yönetici bölümünden Yerleştirme sayfasına gidin. https://your_instance.looker.com/admin/embed

Yerleştirilmiş Alan İzin Verilenler Listesi alanına yerleştirilen içeriğin alanını girin. Alan adını yazdıktan sonra Tab tuşuna basarak alanın bir kutuda görünmesini sağlayın. Sonuna eğik çizgi / eklemeyin.

Güncelle düğmesini seçin.

3. iFrame'den etkinlik mesajlarını dinleme

Yerleşik Looker içeriğine sahip iFrame'iniz, barındırıcı web sayfasına mesaj gönderir. Bu etkinlik mesajları, yerleştirilmiş görüntüleyici içeriği hakkında zamanında bilgiler içerir (ör. yerleştirilmiş kontrol panelinin yüklenmeye başlaması veya kullanıcının yerleştirilmiş içerikte İndir seçeneğini belirlemesi). Bu etkinlikleri alıp ayrıştıralım.

Etkinlik nesnesi şemasını anlama

Etkinlik nesnesinin şeması:

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

Etkinliğin her zaman, hangi etkinliği gösterdiğini belirlemenize olanak tanıyan bir type özelliği bulunur. Etkinliğe özel diğer tüm özellikler etkinlik referansımızda tanımlanmıştır.

Etkinliği alma ve ayrıştırma

Bunu, web sayfanızın JavaScript'inin iFrame'inizi başlattığı veya yönettiği yere ekleyin:

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"); 
    }
  }
});

Kod snippet'i aşağıdakileri yapar:

  1. window nesnesinden "message" etkinliğini dinler.
  2. Mesajın source özelliğinin, yerleştirilmiş Looker içeriğine sahip iframe olup olmadığını kontrol eder.
  3. İletinin origin mülkünün Looker örneğinizin alanıyla eşleşip eşleşmediğini kontrol eder.
  4. JSON, etkinlik nesnesine erişmek ve ayrıştırmak için iletinin data mülkünü ayrıştırır.
  5. Hangi etkinlik olduğunu belirlemek ve buna göre işlem yapmak için etkinlik nesnesinin type özelliğini açar.

Artık barındırıcı web sayfanız, yerleştirilmiş Looker içeriğinizin yayınladığı etkinliklere dinamik olarak tepki verebilir.

4. iframe'e işlem mesajı gönder

Ana makine web sayfanız, iframe'inizin yerleşik Looker içeriğine de mesaj gönderebilir. Bu işlem mesajları, yerleşik kontrol panelinizdeki filtreleri güncellemek gibi yerleşik Looker içeriğinizin durumunu değiştirebilir. Yerleşik kontrol panelinize sorgularını çalıştırmasını ve mesajı iFrame'inize göndermesini söyleyen bir işlem mesajı oluşturalım.

İşlem mesajı oluşturma

Web sayfanızın JavaScript'inde bir işlem mesajı oluşturun:

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

action nesnesi, önceki event nesnesi ile aynı biçime sahiptir. Her zaman bir type özelliği ve ardından işlem referansımızda tanımlanan işleme özgü özellikleri olur. İşlem mesajı JSON biçiminde olmalıdır.

İşlem mesajını gönderme

Web sayfanızın JavaScript'inde, JSON biçimli eylemi iframe'inize gönderin:

const iframeElement = document.getElementById("looker");
iframeElement.contentWindow.postMessage(actionJSONFormatted, 'https://instance_name.looker.com');
  1. İşleminizi göndereceğiniz iframe'inizi belirleyin.
  2. Mesaj göndermek için iframe'ın contentWindow mülkünde postMessage() yöntemini çağırın.

Artık ana makine web sayfanız, yerleştirilmiş Looker içeriğinizin durumunu dinamik olarak değiştirebilir.

5. Ek bilgiler

Tebrikler! Artık iFrame'inizin yerleşik Looker içeriğindeki etkinlikleri dinleyebilir ve bu içeriğe işlem gönderebilirsiniz. Daha fazla bilgi için şu kaynakları inceleyin: