Yerleşik Looker iframe mesajlaşması

1. Başlamadan önce

Looker içeriğini, özel 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 aracılığıyla iframe'inizle etkileşim kuracağız. 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?

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

Gerekenler

  • iFrame'i yöneten ön uç kodunuzun 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 iframe'inizi 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ştirme 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'sinin https://mywebsite.com/with/embed olduğunu varsayarsak web sayfasının alan adı https://mywebsite.com olur.

Özel yerleştirme kullanıyorsanız iframe'in src'sine alanı 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ı embed_domain sorgu parametresi olarak yerleştirme URL'sine ekleyin.

Yerleştirme alanını Looker örneğinde izin verilenler listesine ekleyin.

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

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

Yerleştirilmiş Alan İzin Verilenler Listesi alanına yerleştirmenin alanını girin. Alan adını yazdıktan sonra Tab tuşuna basın. Böylece alan adı bir kutuda görünür. Sondaki eğik çizgiyi / eklemeyin.

Güncelle düğmesini seçin.

3. iFrame'den gelen etkinlik mesajlarını dinleme

Yerleştirilmiş Looker içeriği içeren iFrame'iniz, barındırıcı web sayfasına mesaj gönderir. Bu etkinlik mesajları, yerleştirilmiş Looker içeriğiyle ilgili zamanında bilgi içerir. Örneğin, yerleştirilmiş kontrol panelinin yüklenmeye başlayıp başlamadığı veya kullanıcının yerleştirilmiş içerikteki İndir seçeneğini seçip seçmediği gibi. Bu etkinlikleri alıp ayrıştıralım.

Etkinlik nesnesi şemasını anlama

Etkinlik nesnesinin şeması şöyledir:

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

Etkinlik, her zaman ne tür bir etkinlik olduğunu belirlemenize olanak tanıyan bir type özelliğine sahip olur. Etkinliğe özgü diğer tüm özellikler Etkinlikler referansımızda tanımlanı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 şunları yapar:

  1. window nesnesinden gelen "message" etkinliğini işler.
  2. Mesajın source özelliğinin, yerleştirilmiş Looker içeriğine sahip iframe olup olmadığını kontrol eder.
  3. İletinin origin özelliğinin Looker örneğinizin alanı olup olmadığını kontrol eder.
  4. JSON, etkinlik nesnesine erişmek ve onu 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 açar.

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

4. İframe'e işlem mesajı gönderme

Ana makine web sayfanız, iframe'inizin yerleştirilmiş 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üncelleme). Yerleştirilmiş kontrol panelinize sorgularını çalıştırmasını ve iletiyi iFrame'inize göndermesini söyleyen bir işlem iletisi 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çime sahiptir. Her zaman bir type özelliği ve ardından işlem referansımızda tanımlanan işleme özgü özellikler bulunur. İşlem mesajı, JSON biçiminde olmalıdır.

İşlem mesajını gönderme

Web sayfanızın JavaScript'inde, JSON biçimli işlemi 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 barındırıcı 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çeriğe işlem gönderebilirsiniz. Daha fazla bilgi için aşağıdaki kaynaklara göz atın: