How to execute a js function based on url hash url

Question

I saw some of websites executes a JavaScript function based on has in the URL. For example,

when I access http://domain.com/jobs#test

then the website executes a function based on #test

I can do it by checking location.href, but is there a better way?

Answer 1

This is what i do:

window.onload = function(){
    var hash = (window.location.hash).replace('#', '');
    if (hash.length == 0) {
        //no hash do something
    }
    else {
        //else do something with hash
    }
}

demo: http://jsfiddle.net/maniator/XCjpy/show/#test
demo2: http://jsfiddle.net/maniator/XCjpy/show/
demo3: http://jsfiddle.net/maniator/XCjpy/show/#testing_again

Answer 2

Live Demo

$(window).bind('hashchange', function() {
    var hash = document.location.hash;
    var func = hash.replace('#', '');
    eval(func + '()');
});

function asdf() {
    alert('asdf function');
}

function qwerty() {
    alert('qwerty function');
}

Note: eval() is dangerous. You should make a predefined array of safe functions, and call those.

Answer 3

Have a look at This.
See the property table.
location.hash should help you.

Answer 4

You could use a library like YUI to do this more elegantly, Take a look at the YUI Browser History Manager

http://developer.yahoo.com/yui/history/

Answer 5

If you don't need to support old browsers like IE6 and IE7 you can use:

window.onhashchange = function(){
  switch(location.hash) {
    case '#hash1':
      //do something
    break;
    case '#has2':
      //do something else
    break;
  }
}

But if you have to support older browsers you need to poll:

var oldHash = location.hash;
setInterval(function(){
  if(location.hash !== oldHash){
    oldHash = location.hash;
    //hash changed do something
  }
}, 120);