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?

score 4 · Answer 1 · answered Sep 02 '09 at 18:07

4

You can try History Event plugin.

answered Sep 02 '09 at 18:07

Daniel Moura

7,472
5
33
60

They use a time too. I guess that's what I'll do. – Ethan Sep 02 '09 at 18:21

score 3 · Accepted Answer · answered Sep 02 '09 at 18:07

3

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.

answered Sep 02 '09 at 18:07

Ken Browning

27,173
6
54
67

1

i'll do the timer if everything else fails, thanks! Let me see if anyone has a way that doesn't involve a timer. – Ethan Sep 02 '09 at 18:13

score 2 · Answer 3 · answered Jan 18 '11 at 05:03

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

score 1 · Answer 4 · answered Oct 24 '09 at 11:24

1

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

answered Oct 24 '09 at 11:24

mcmlxxxiii

863
1
8
21

score 0 · Answer 5 · answered Sep 02 '09 at 18:23

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

Jquery - tell when the hash changes?

5 Answers5

Linked