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?
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
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);
hashChanged that you use for window.onhashchange = hashChanged. And you call the same function hashChanged() in a script tag at the very end of the body tag$(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.
eval in the answer, and then tell not to use it? Nice :)Have a look at This.
See the property table.
location.hash should help you.
You could use a library like YUI to do this more elegantly, Take a look at the YUI Browser History Manager
