Cross Browser Hash Change Event
Tabel Konten
hashchange
adalah event JavaScript yang akan memicu suatu fungsi untuk bekerja setiap kali hash pada address bar berubah. Umumnya terjadi ketika pengguna menekan tombol Back dan/atau Forward pada peramban. Bermanfaat untuk memastikan agar AJAX bisa tetap bekerja ketika pemicu fungsi yang digunakan adalah berupa penekanan tombol Back dan Forward:
// http://stackoverflow.com/questions/9339865/get-the-hashchange-event-to-work-in-all-browsers-including-ie7
(function(w) {
if ('onhashchange' in w) {
if (w.addEventListener) {
w.addHashChange = function(func, before) {
w.addEventListener('hashchange', func, before);
};
w.removeHashChange = function(func) {
w.removeEventListener('hashchange', func);
};
return;
} else if (w.attachEvent) {
w.addHashChange = function(func) {
w.attachEvent('onhashchange', func);
};
w.removeHashChange = function(func) {
w.detachEvent('onhashchange', func);
};
return;
}
}
var hashChangeFuncs = [], oldHref = location.href;
w.addHashChange = function(func, before) {
if (typeof func === 'function') hashChangeFuncs[before ? 'unshift' : 'push'](func);
};
w.removeHashChange = function(func) {
for (var i = hashChangeFuncs.length-1; i >= 0; i--) {
if (hashChangeFuncs[i] === func) hashChangeFuncs.splice(i, 1);
}
};
setInterval(function() {
var newHref = location.href;
if (oldHref !== newHref) {
oldHref = newHref;
for (var i = 0; i < hashChangeFuncs.length; i++) {
hashChangeFuncs[i].call(w, {
'type': 'hashchange',
'newURL': newHref,
'oldURL': oldHref
});
}
}
}, 100);
})(window);
Dasar Penggunaan
Fungsi ini akan menampilkan kotak peringatan setiap kali hash berubah. Fungsi ini tidak memerlukan pemicu seperti window.onload
, elem.onclick
, atau event apapun! Karena pemicu kemunculan kotak pesan berasal dari perubahan hash pada peramban. Untuk mengubah hash pada peramban bisa dilakukan dengan cara mengeklik tautan lokal yang mengandung hash atau menekan tombol Back dan/atau Forward:
addHashChange(function() {
alert('OK!');
});
Sampel Penerapan AJAX
$('.ajax-link').on("click", function() {
window.location.hash = this.hash;
return false;
});
// If user opens a URL that already contains a hash...
if (window.location.hash) {
var theHash = window.location.hash; // Save the hash
window.location.hash = ''; // Remove the hash, so if the AJAX link is clicked, the `hashchange` event will be triggered.
$('.ajax-link').filter(function() {
return this.hash == theHash;
}).trigger("click"); // Trigger a click event to the AJAX link if it `hash` match with `window.location.hash`
}
// From hash change or history (Back/Forward button)
// Does not require any event. Just place the function like this...
// Because the trigger came from the hash changes in the address bar.
addHashChange(function(e) {
var url = (e.newURL||location.href).split('#');
$('#container').load(url[0] + ' #' + url[1]);
});
7 Komentar
Unknown
gak mudang mas taufik,,ni postingan buat yg senior hahahay
Unknown
saya ga paham ni.. :p
untuk penerapan di blog apa yang harus diganti,? .ajax-link dan #container itu mengarah kemana mas???
Taufik Nurrohman
Ini cuma contoh. Untuk penerapan fungsi yang sesungguhnya bisa kamu lihat pada widget Galleria yang baru-baru ini Saya perbaharui ⇒ DEMO
Unknown
bener" ga paham saya,, belum nyampe ilmu saya.. :p
kalau hash yang seperti ini ya contoh #.UaRsr6xv_xU
Unknown
Penempatan scriptnya di mana mas
budkalon
sebenarnya fungsi dari script ini untuk apa? dan kelebihannya? :p
Anonim
sama ini juga blum kesampaian sama otak saya