hashchange yakni event JavaScript yang akan memicu suatu fungsi untuk bekerja setiap kali hash pada address bar berubah. Umumnya terjadi saat pengguna menekan tombol Back dan/atau Forward pada peramban. Bermanfaat untuk memastikan biar AJAX dapat tetap bekerja saat pemicu fungsi yang dipakai yakni berupa penitikberatan 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 ibarat window.onload, elem.onclick, atau event apapun! Karena pemicu kemunculan kotak pesan berasal dari perubahan hash pada peramban. Untuk mengubah hash pada peramban dapat 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]); });