RSS

window.onhashchange Event

Mart 29

Javascript framework’lerinin ve Ajax ile çalışan dinamik sayfaların sayısı arttıkça adreslerin anchor kullanarak çalışan uygulamaların sayısı artmaya başladı. Bu uygulamalara en büyük örnekler olarak gmail ve facebook verilebilir.

Çoğunuz gmailde gezinirken sadece sayfa adresinin sonundaki # işaretinden sonraki kısımın değiştiğini ve tarayıcının ileri/geri okları ile gezildiğinde sayfanın da buna göre değiştiğini farketmiştir.

Bu işlemi yapmanın en basit yolu bir interval ile düzenli olarak url’yi kontrol edip, değiştiğinde ilgili fonksiyonu çalıştırmaktır.

// setInterval ile url'yi 300 milisaniyede bir kontrol eden basit bir örnek;
window.onload = new function() {
	setInterval( "hashCheck()", 300 );
}

var currentHash = null;
var query = location.href.split('#');
if( query[1] != undefined )
	currentHash = query[1]; 

function hashCheck(){
	var query = location.href.split('#');
	if( query[1] != currentHash )
	{
		currentHash = query[1];
		// Buradan sonra gerekli işlemleri yapacak olan onHashChange() fonksiyonu çağrılacaktır.
		onHashChange();
	}
}

function onHashChange(){
	// Bu fonksiyonun içinde istediğiniz işlemleri yapabilirsiniz.
}

Bu fonksiyon sürekli olarak tetiklendiği için sitenizi ziyaret eden kişilerin tarayıcısına fazladan bir yük oluşturmaktadır. Başka bir yaklaşım olarak kullanılan bir iframe methodu da bulunmaktadır.

Bu yöntemde ise hashchange methoduyla birlikte gizli bir iframe’in içeriği de güncellenmekte ve onscroll event’ine eklenen fonksiyon aracılığı ile onhashchange özelliği taklit edilmektedir. Bu yöntemle ilgili örnek kodu ve detaylı açıklamayı onhashchange-without-setinterval adresinden bulabilirsiniz.

Bu sorunun çözümü olarak HTML5 ile birlikte gelen yeni bir window event’i bulunuyor. İsmi “onhashchange“. Bu olay şu anda Internet Explorer 8, Firefox 3.6 ve Chrome 5 tarafından destekleniyor. Yukarıda yazdığım fonksiyona onhashchange olayını da eklediğimizde son kod aşağıdaki gibi olmaktadır.

// setInterval ile url'yi 300 milisaniyede bir kontrol eden basit bir örnek;
if("onhashchange" in window)
{
	window.onhashchange = new function() {
		onHashChange();
	}
} else {
	var currentHash = null;
	var query = location.href.split('#');
	if( query[1] != undefined )
		currentHash = query[1]; 

	window.onload = new function() {
		setInterval( "hashCheck()", 300 );
	}
}

function hashCheck(){
	var query = location.href.split('#');
	if( query[1] != currentHash )
	{
		currentHash = query[1];
		// Buradan sonra gerekli işlemleri yapacak olan onHashChange() fonksiyonu çağrılacaktır.
		onHashChange();
	}
}

function onHashChange(){
	// Bu fonksiyonun içinde istediğiniz işlemleri yapabilirsiniz.
}
 

Posted by on 29 Mart 2010 in Javascript, Programlama

1 Comment

One response to “window.onhashchange Event

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir