Yerleşik Looker iframe mesajlaşması

1. Başlamadan önce

Gizli yerleştirme veya TOA yerleştirme ile bir iFrame içine yerleştirilmiş Looker içeriğiniz olmalıdır. 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

  • Ön uç 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 bir id özelliği ekleyin

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 adını belirleme. Web sayfasının URL'si https://mywebsite.com/with/embed ve 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şik Alana İzin Verilir alanına, yerleştirmenin alan adını girin. Yazdıktan sonra Sekme tuşuna basarak alanın bir kutu içinde görünmesini sağlayın. Sona 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, mesajları ana makine web sayfasına 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ı şöyledir:

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

Etkinliğin her zaman, hangi etkinlik olduğunu belirlemenize olanak tanıyan bir type özelliği olur. Etkinliğe özel diğer tüm özellikler etkinlikler referansımızda tanımlanmıştır.

Etkinliği alma ve ayrıştırma

Bunu, iframe'inizi web sayfanızın JavaScript'inin 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 şunları 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. Mesajın origin özelliğinin Looker örneğinizin alanı olup olmadığını kontrol eder.
  4. JSON, etkinlik nesnesine erişmek ve nesneyi ayrıştırmak için mesajın data özelliğini ayrıştırır.
  5. Hangi etkinlik olduğunu belirlemek ve buna göre işlem yapmak için etkinlik nesnesinin type özelliğini etkinleştirir.

Artık ana makine 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 web sayfanız, iframe'inizin yerleşik Looker içeriğine de mesaj gönderebilir. Bu işlem mesajları, yerleştirilmiş Looker içeriğinizin durumunu değiştirebilir (ör. yerleştirilmiş kontrol panelinizdeki filtreleri güncellemek). Yerleşik kontrol panelinize, sorgularını çalıştırmasını ve mesajı iFrame'inize göndermesini bildiren bir action 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 nesnesiyle aynı biçimi kullanıyor. 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önder

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'i belirleyin.
  2. Mesajı göndermek için iframe'in contentWindow özelliğinde 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ştirilmiş Looker içeriğindeki etkinlikleri dinleyebilir ve bu içeriklere işlem gönderebilirsiniz. Daha fazla bilgi için şu kaynakları inceleyin: