Cross Browser Hash Change Event

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!');
});

Lihat Demo

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]);
});