Eyl.26

HTML5 API’leri ile Çalışmak – Ders 12 : Web Messaging API

Web Messaging API, temelde iki farklı sayfa arasında iletişimin kurulmasını sağlar. Sayfalardan birisi gönderici, diğeri alıcı olur. Mesela aynı domain altındaki sayfalara veya direkt olarak hedef gösterilmiş bir iframe’e mesaj gönderilebilir. Gönderilen mesaj düz metin olabileceği gibi JSON gibi çok fazla veri içeren bir veri formatı da olabilir. Gönderilen verileri karşılayan taraf, verileri işleyip gerekli fonksiyonları da tetikleyebilir.

Web Messaging API’de iki farklı yöntem olduğu için ikisi ile de örnek yapalım. Örneklerimizi yine localhost üzerinden veya bir domain’de çalıştıracağız. Web Messaging API bir domain ister.

Iframe’e Düz Metin Verisi Göndermek

Yapacağımız örneğimiz oldukça basit. Sayfamızda bir iframe sayfa açacağız. Iframe’in yanında da bir butona tıklandığında Web Messaging API ile iframe’in id’si referans alınarak mesaj gönderilecek. Iframe’de de bir

etiketi içinde gelen mesaj gösterilecek. Tabi alıcı sayfada (iframe olan) mesajı dinlemesi için gerekli metotları tanımlayacağız.

gonderen.html

<!DOCTYPE html>
<html>
<head>
  <title>Gönderen</title>
  <meta charset="utf-8">
</head>
<body>
   <iframe id="iframe" src="alici.html" ></iframe><br>
   <button onclick="mesajGonder()">Mesaj Gönder</button>
</body>
<script>
   function mesajGonder(){
      var iframe = document.getElementById("iframe").contentWindow;
      iframe.postMessage("Merhaba", "*");
   }
</script>
</html>

Komutlarımızı incelediğimizde iframe’e id olarak iframe girilmiş, bunu referans alacağız. Yüklenecek olan sayfa ismi de alici.html olarak belirtilmiş. Sonrasında bir buton tanımlanmış ve butona tıklanınca mesajGonder() fonksiyonu çağırılmış. Fonksiyona baktığımızda da iframe’i DOM’dan alıp iframe değişkenine atamışız. Bu değişken ismi de referans alınarak .postMessage() metodu ile veri gönderilmiş. Bu metot aşağıdaki yapıdaki gibidir.

alici_hedef.postMessage(“Mesaj”, “domain”);

Yani ilk olarak alıcı kaynak belirtilerek metot ona uygulanır. İlk parametre gönderilecek olan mesaj, ikinci metot ise etki alanı (domain)’dir. Eğer tüm alanlarda etkili olsun derseniz, * (yıldız) joker karakterini kullanabilirsiniz.

alici.html

<p id="mesaj">....</p>
<script>
   function mesajiGoster(e) {
	           
       document.getElementById('mesaj').innerHTML=e.data;
   }
   window.addEventListener("message", mesajiGoster);
</script>

Alıcı olan sayfada ilk olarak mesajın gösterilecek p etiketi tanımlanmış ve id ismi mesaj olarak girilmiş. Ardından script etiketleri arasında mesajı dinleyecek olan olay yöneticisi tanımlanmış. message event’i ile mesajiGoster() fonksiyonuna gelen değerler e parametresi ile aktarılıyor. Fonksiyonda da e verisi içinde yer alan data ile gelen mesajı mesaj id’li element içinde gösteriyoruz.

Dinleyici Sayfaya JSON Verisi Göndererek Sayfada Manipulasyon Yapmak

Şimdi biraz daha kompleks bir örnek üzerinde çalışalım. Örneğimizde ana sayfamızdan (parent), bir popup sayfa açtıracağız. Açtırdığımız sayfaya da da JSON verisi göndereceğiz. JSON verisinde iki farklı komut yapısı göndereceğiz. Mesela; popup sayfamıza resim aç ve arkaplan rengi değiştir şeklinde iki farklı komut göndermek isteyebilirim. Resim açmasını istediğimde de resmin başlığını ve resmin URL’inide belirtmem gerekir. Arkaplan rengini değiştirmesini istediğimde de sadece renk kodunu göndermem yeterli olacaktır. Bu emirler için aşağıdaki gibi birer JSON yapısı uygun olacaktır.

Resim açma isteği:

{
	komut: "resim",
	ayarlar: {
		baslik: "Japonya kiraz bahçesi",
		url: "resimler/japonya.jpg"
	}
}

Arkaplan rengini değiştirme isteği:

{
	komut: "renk",
	ayarlar: {
		kod: "#F0F0F0"
	}
}

Alıcı tarafta, yani açılan popup’ta gelen JSON mesajı dinlenecek ve ilk olarak JSON’daki komut key’ine bakılacak. Gelen değere göre de ayarlar key’indeki verilere göre işlemler yapılacak. Ek olarak bir de domain günveliğini sağlayacağımız basit bir sorgu ekleyeceğiz.

İlk olarak parent, yani ana sayfa olan gonderen.html sayfasını kodlarını yazalım. Açıklama satırlarını inceleyin…

<!DOCTYPE html>
<html>
<head>
  <title>Gönderen</title>
  <meta charset="utf-8">
</head>
<body>
	<button onclick="sayfayiAc()">Sayfayı Aç</button>
	<button id="resim_gonder" style="display:none" onclick="resimGonder()">Resim Gönder</button>
	<button id="arkaplan_rengi_degistir" style="display:none" onclick="arkaplanRengiDegistir()">Arkaplan Rengi Değiştir</button>
</body>
<script>
	// Resim için JSON tanımlanıyor
	var resimJSON = {
		komut: "resim",
		ayarlar: {
			baslik: "Japonya kiraz bahçesi",
			url: "resim/japonya.jpg"
		}
	};
	// Arkaplan rengi için JSON tanımlanıyor.
	var arkaplanJSON = {
		komut: "renk",
		ayarlar: {
			kod: "#FF0000"
		}
	};
	// Popup sayfa değişkeni ve domain tanımlanıyor.
	// popupSayfa değişkenine açılacak olan sayfa atanacak.
	// Böylece açılan sayfaya ithafta bulunulabilecek.
	var popupSayfa;
	var domain = "http://localhost/"
	// Sayfa Aç butonuna tıklandığında popup.html Popup olarak açılıyor.
	// Başlangıçta sadece Sayfa Aç butonu görünür.
	// Diğerleri display:none ile gizlenmiş.
	// Çünkü popup açılmadan bunların görünür olması anlamsız.
	// Diğer butonlarımız da görünür yapılıyor.
	function sayfayiAc(){
		// Popup açılıyor ve diğer butonlar görünür yapılıyor.
		popupSayfa = window.open('popup.html');
		document.getElementById("resim_gonder").style.display = "inline";
		document.getElementById("arkaplan_rengi_degistir").style.display = "inline";
	}
	// Resim, JSON verisi ile gönderiliyor.
	function resimGonder(){
		popupSayfa.postMessage(resimJSON, domain); 
	}
	// Arkaplan rengi, JSON verisi ile gönderiliyor.
	function arkaplanRengiDegistir(){
		popupSayfa.postMessage(arkaplanJSON, domain); 
	}
</script>
</html>

Şimdi de alıcı sayfa olan popup.html sayfasını kodlayalım. Açıklama satırlarını inceleyin…

<figure >
  <img id="resim" width="300" height="240" >
  <figcaption id="resim_baslik"></figcaption>
</figure>

<script>
     // Messaging API ile gelen mesajı işleyecek fonksiyon
     function mesajiIsle (e) {
          /* Gelen verileri görüp kontrol etmek için konsolda bakıyoruz. */
         console.log(e.data);	
          /* Güvenlik için domain kontrolü yapıyoruz. Gönderilen mesajın origin'i yani domain'i farklı da olabilir. Sadece localhost üzerinden gelenleri dinlemeye izin veriyoruz. Siz de kendi domain'inizi yazabilirsiniz. */	
          if(e.origin == "http://localhost"){
               // Eğer JSON data'daki komut resim ise... 
               /* url ve baslik alt key'leri alınıp ID isimlerine göre elementlere atanıyor. img etiketi için resim ıd'si ile src attribute'üne url, resim alt yazısı için resim_baslik id'si ile elementin içine innerHTML ile baslik verisi gönderiliyor. */ 
               if(e.data.komut == "resim"){
                    document.getElementById("resim").src = e.data.ayarlar.url;
                    document.getElementById("resim_baslik").innerHTML = e.data.ayarlar.baslik;
               }
               // Eğer JSON data'daki komut renk ise...
               if(e.data.komut == "renk"){
                    // body etiketinin arkaplan rengi kod değeri ile düzenleniyor.
                    document.body.style.backgroundColor = e.data.ayarlar.kod;
               }
          }
     }
     /* Messaging API ile mesaj geldiğinde message parametresi ile birlikte mesajiIsle fonksiyonuna gönderiliyor. */
     window.addEventListener("message", mesajiIsle);
</script>
İçeriği paylaş:
  • facebook
  • twitter

Leave a comment

Yorum