IE6/7 Back/Forward button don't change window.location.hash

Question

I have an ajax webapp (JSF 2.0) that uses hash for navigation.

I've used both event firing with help of this answer and setInterval() to check for value change in older browsers (Mainly IE6+7).

The Javascript code that does this:

window.onload = window.onhashchange = function() {
    lastHash = window.location.hash; // To save a refresh on browsers that don't need it.
    var fragment = document.getElementById('fragment');
    fragment.value = window.location.hash;
    fragment.onchange();
}

// Old Browsers That don't support onhashchange...
var lastHash = window.location.hash;
function checkFragment() {
    if (window.location.hash != lastHash) {
        lastHash = window.location.hash;
        var fragment = document.getElementById('fragment');
        fragment.value = window.location.hash;
        fragment.onchange();
    }
}

This works nicely. Meaning, when I change the value of the hash the AJAX app gets the notification and updates. One instance in which this doesn't work is IE 6/7. When I press Back/Forward buttons, I can see the url bar gets updated with the correct hash values, but the windows.location.hash doesn't seem to change and so my SetEvent() function doesn't detect the change.

Anyone found a solution to this? Thanks!

Answer 1

Consider using jQuery Hashchange plugin to avoid IE6/7 compatibility headaches. You can find code example here. It can be altered as follows for your case.

<script src="jquery.js"></script>
<script src="jquery-hashchange.js"></script>
<script>
    $(function(){
        $(window).hashchange(function(){
            $('#fragment').val(location.hash).change();
        });

        $(window).hashchange();
    });
</script>