Jquery - tell when the hash changes?

Question

I'm trying to make my site respond correctly to the back button. I've saved that hash of what I want it to do, but I don't know the hook for jQuery to be able to tell when the hash changes. It's not .ready(), because the page doesn't reload. What do I use?

Edit for a bit of clarity:

I'm using an iframe, so I can't tell when someone clicks a link. It's on the same subdomain, so i'm able to see it's filepath, and am saving it so you can bookmark. Unfortunately by saving it as a hash, my back button now fails to reload, which fails to reload the iframe, so my back button is essentially broken. If there was a way to tell when the URI changes, I could check it against the iframe address and change it if they don't match.

All I need is a way to check if the URI has changed. Is there a .change() for the URI? Something along those lines?

Answer 1

After the document is ready, you examine the hash and alter the page appropriately.

I don't know the hook for jQuery to be able to tell when the hash changes

You can intercept your hash anchors' click events and respond appropriately as opposed to waiting for a "the hash has changed" event (which doesn't exist).

Some approaches create a "the hash has changed" event by inspecting window.location.hash on a timer.

Answer 2

You can try History Event plugin.

Answer 3

Ben 'the cowboy' Alman wrote a cross platform plugin for hash changes

http://benalman.com/news/2010/07/jquery-hashchange-event-v13/

I dont know if your using it inside of the iframe or what, but if you were to use it outside the iframe it would be like

$(function(){
    $(window).hashchange(function(){
       //Insert event to be triggered on has change.
       changeIframeContent(window.location.hash);
    })
})

Answer 4

You should have a look at the solution of Ben Nadel which is in binding events to non-DOM objects.

Answer 5

There is'nt a buitin way to watch for hash changes, in firefox you could use watch method, but as far as I know it isnt default, so you can hack it writing something like (see below)

function setWatchHashChanges(functionObject)
{
    if(window.location.watch)
    {
        window.location.watch('hash', function(e){functionObject(e);return e;});
    } else {
        if(!setWatchHasnChanges.hash)
        {
            setWatchHasnChanges.hash = window.locaton.hash;
        } else {
            setInterval(function(){
            if(setWatchHasnChanges.hash!== window.locaton.hash)
            {
                setWatchHasnChanges.hash = window.locaton.hash;
                functionObject(setWatchHasnChanges.hash);
            }
        }, 100);
    }
}