如何基于 url hash url#nameoffunction 执行 js 函数

How to execute a js function based on url hash url#nameoffunction

本文关键字：执行 js 函数 url#nameoffunction hash 何基于 url      更新时间：2023-09-26

我看到一些网站根据URL中的has执行JavaScript函数。例如

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

然后网站执行一个基于 #test 的功能

我可以通过检查 location.href 来做到这一点，但是有更好的方法吗？

这就是我所做的：

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

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

如果您不需要支持 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);

现场演示 

$(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()很危险。您应该创建一个预定义的安全函数数组，并调用这些函数。

看看这个。
请参阅属性表.
location.hash应该可以帮助你。

你可以使用像YUI这样的库来更优雅地做到这一点，看看YUI浏览器历史管理器

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

相关文章：