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

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

如果您正在使用jQuery(对于大多数人来说，这应该是基本的)，那么一个很好的解决方案是使用jQuery提供的抽象，通过使用它的事件系统来侦听窗口对象上的hashchange事件。

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

这里的好处是，您可以编写甚至不需要担心hashchange支持的代码，但是您确实需要做一些神奇的事情，以不太为人所知的jQuery特性jQuery特殊事件的形式。

有了这个特性，当有人第一次试图以任何方式(比如绑定到事件)使用事件时，你基本上可以为任何事件运行一些设置代码。

在这个设置代码中，您可以检查本机浏览器的支持，如果浏览器没有本机实现这一点，您可以设置一个计时器来轮询更改，并触发jQuery事件。

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

Firefox从3.6开始就有了onhashchange事件。看到window.onhashchange。

你可以很容易地在window的“hash”属性上实现一个观察者(“watch”方法)。位置”对象。

Firefox有自己的实现来监视对象的变化，但如果您使用其他实现(例如在JavaScript中监视对象属性的变化)—对于其他浏览器，这将达到目的。

代码如下所示:

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;

当然这会触发你的观察者函数。

简单的例子 单击按钮更改散列

窗口。onhashchange = () => console.log('散列更改-> ${window.location.hash} ') <按钮onclick = " window.location.hash = math . random ()“>哈希到数学。随机> < /按钮 <按钮onclick = " window.location。>哈希到ABC</button> . <按钮onclick = " window.location。hash='XYZ'"> hash到XYZ</button> .

我一直在使用path.js作为客户端路由。我发现它非常简洁和轻量级(它也被发布到NPM)，并使用了基于哈希的导航。

path.js NPM

path.js GitHub

var page_url = 'http://www.yoursite.com/'; // full path leading up to hash;
var current_url_w_hash = page_url + window.location.hash; // now you might have something like: http://www.yoursite.com/#123

function TrackHash() {
    if (document.location != page_url + current_url_w_hash) {
        window.location = document.location;
    }
    return false;
}
var RunTabs = setInterval(TrackHash, 200);

就是这样……现在，无论何时点击后退或前进按钮，页面都会根据新的哈希值重新加载。