On - window.location.hash - 更改？

我正在使用Ajax和hash进行导航.

有没有办法检查是否window.location.hash改变了这样？

http://example.com/blah #123到http://example.com/blah #456

如果我在文档加载时检查它,它可以工作.

但是如果我有基于#hash的导航,那么当我按下浏览器上的后退按钮时它就不起作用了(所以我从#456跳到了#123).

它显示在地址框内,但我无法用JavaScript捕获它.

真正做到这一点的唯一方法(以及'reallysimplehistory'是如何做到的),是通过设置一个持续检查当前哈希的间隔,并将其与之前的哈希进行比较,我们这样做并让订阅者订阅更改如果哈希值发生变化我们会触发的事件..它不完美但浏览器本身并不支持此事件.

更新以保持这个答案新鲜:

如果你正在使用jQuery(今天应该对大多数人来说有点基础)那么一个很好的解决方案是使用jQuery为你提供的抽象,通过使用它的事件系统来监听window对象上的hashchange事件.

$(window).on('hashchange', function() {
  //.. work ..
});

这里的好处是你可以编写代码,甚至不需要担心hashchange支持,但是你需要做一些魔术,以一些鲜为人知的jQuery特性jQuery特殊事件的形式.

使用此功能,您基本上可以为任何事件运行一些设置代码,第一次有人尝试以任何方式使用事件(例如绑定到事件).

在此设置代码中,您可以检查本机浏览器支持,如果浏览器本身不实现此功能,您可以设置单个计时器来轮询更改,并触发jQuery事件.

这完全解除了你的代码需要理解这个支持问题,这种特殊事件的实现是微不足道的(获得一个简单的98%工作版本),但为什么这样做时别人已经.

HTML5 指定一个hashchange事件.现在所有现代浏览器都支持此事件.在以下浏览器版本中添加了支持:

Internet Explorer 8

Firefox 3.6

Chrome 5

Safari 5

歌剧10.6

请注意,对于Internet Explorer 7和Internet Explorer 9,该参数if将为true(对于Windows中的"onhashchange"),但window.onhashchange永远不会触发,因此最好存储哈希并在每100毫秒后检查它是否已更改适用于所有版本的Internet Explorer.

    if (("onhashchange" in window) && !($.browser.msie)) {
         window.onhashchange = function () {
              alert(window.location.hash);
         }
         // Or $(window).bind( 'hashchange',function(e) {
         //       alert(window.location.hash);
         //   });
    }
    else {
        var prevHash = window.location.hash;
        window.setInterval(function () {
           if (window.location.hash != prevHash) {
              prevHash = window.location.hash;
              alert(window.location.hash);
           }
        }, 100);
    }

编辑 - 自jQuery 1.9以来,$.browser.msie不受支持.资料来源:http://api.jquery.com/jquery.browser/

IE浏览器中有很多处理History和window.location.hash的技巧:

正如原始问题所述,如果您从页面a.html #b转到a.html #c,然后点击后退按钮,则浏览器不知道该页面已更改.让我用一个例子来说:window.location.href将是'a.html#c',无论你是在a.html #b还是a.html #c.

其实,a.html#B和a.html#c的存储在历史上只有当要素""和""以前在页面存在.

window.location.watch(
    'hash',
    function(id,oldVal,newVal){
        console.log("the window's hash value has changed from "+oldval+" to "+newVal);
    }
);

var myHashLink = "home";
window.location = window.location + "#" + myHashLink;

window.addEventListener('hashchange', doSomethingWithChangeFunction());

doSomethingWithChangeFunction () { 
    // Get new hash value
    let urlParam = window.location.hash;
    // Do something with new hash value
};