Jquery - tell when the hash changes?

Question

Hey SO,

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

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

Answer 4

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