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
- Çalışan bir Looker örneğiniz olmalıdır
- iFrame içine özel olarak yerleştirilmiş bir Looker kontrol paneli veya TOA bulunan olma
- window.postMessage() yöntemini anlama
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:
window
nesnesinden"message"
etkinliğini dinler.- Mesajın
source
özelliğinin, yerleştirilmiş Looker içeriğine sahip iframe olup olmadığını kontrol eder. - İletinin
origin
mülkünün Looker örneğinizin alanıyla eşleşip eşleşmediğini kontrol eder. - JSON, etkinlik nesnesine erişmek ve ayrıştırmak için iletinin
data
mülkünü ayrıştırır. - 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');
- İşleminizi göndereceğiniz iframe'inizi belirleyin.
- Mesaj göndermek için iframe'ın
contentWindow
mülkündepostMessage()
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:
- Mevcut tüm etkinlikler ve özellikleri için etkinlik referansı
- Kullanılabilir tüm işlemler ve özellikleri için İşlemler referansı
- Looker içeriğinizi yerleştirmeyle ilgili güvenlikle ilgili en iyi uygulamalar