如何根据url哈希值url#functionname执行js函数？

Question

我看到一些网站根据URL中的哈希标识符执行JavaScript函数。例如，

当我访问http://domain.com/jobs#test

然后该网站就会根据 #test 执行一个函数。

我可以通过检查 location.href 来实现，但是否有更好的方法呢？

- Moon

---

你问了正确的问题，朋友 (y) - Smile

Answer 1

这是我的做法：

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

演示1：http://jsfiddle.net/maniator/XCjpy/show/#test
演示2：http://jsfiddle.net/maniator/XCjpy/show/
演示3：http://jsfiddle.net/maniator/XCjpy/show/#testing_again

- Naftali

---

你救了我，朋友 (y) - Smile

Answer 2

如果您不需要支持IE6和IE7等旧浏览器，可以使用以下代码：

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

但是，如果您必须支持旧版本的浏览器，则需要轮询：

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

- Mic

---

// 感谢您的输入。我不知道有这样的事件，但是我想要做的是通过检查哈希标签在onload或domready时执行一个函数。我测试了一下，但是当我访问带有哈希标签的URL时，onhashchange不会触发。尽管如此，我很感激您的意见。 - Moon

你可以设置一个名为 hashChanged 的函数，并将其用于 window.onhashchange = hashChanged。然后在 body 标签的末尾使用 script 标签调用相同的函数 hashChanged()。 - Mic

Answer 3

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

注意: eval() 是危险的。你应该创建一个预定义的安全函数数组，然后调用那些函数。

- drudge

---

把eval放在答案里，然后告诉别人不要用它？太好了 :) - Mic

Answer 4

请看这里。
查看属性表。
location.hash应该会对你有所帮助。

- Arihant Nahata

Answer 5

你可以使用像 YUI 这样的库更加优雅地完成这个任务，看看 YUI 浏览器历史管理器。

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

- Aravindan R