我希望能够添加locationchange事件侦听器。下面修改后，我们就可以做到了，像这样

window.addEventListener('locationchange', function(){
    console.log('location changed!');
})

相比之下，window.addEventListener('hashchange',()=>{})只有在 url 中的主题标签之后的部分发生更改时才会触发，并且window.addEventListener('popstate',()=>{})并不总是有效。

此修改类似于Christian 的回答，修改历史对象以添加一些功能。

默认情况下，在这些修改之前，有一个popstate事件，但没有pushstate, 和 的事件replacestate。

这会修改这三个功能，使所有的消防自定义locationchange事件供您使用，也pushstate和replacestate活动，如果你想使用它们。

这些是修改：

history.pushState = ( f => function pushState(){
    var ret = f.apply(this, arguments);
    window.dispatchEvent(new Event('pushstate'));
    window.dispatchEvent(new Event('locationchange'));
    return ret;
})(history.pushState);

history.replaceState = ( f => function replaceState(){
    var ret = f.apply(this, arguments);
    window.dispatchEvent(new Event('replacestate'));
    window.dispatchEvent(new Event('locationchange'));
    return ret;
})(history.replaceState);

window.addEventListener('popstate',()=>{
    window.dispatchEvent(new Event('locationchange'))
});

笔记：

我们正在创建一个闭包，old = (f=>function new(){f();...})(old)替换old为一个new包含先前old保存在其中的函数（此时old未运行，但将在其中运行new）

在现代浏览器（IE8+、FF3.6+、Chrome）中，您可以只hashchange在window.

在一些旧的浏览器中，您需要一个持续检查location.hash. 如果您使用的是 jQuery，那么有一个插件可以做到这一点。

window.onhashchange = function() { 
     //code  
}

window.onpopstate = function() { 
     //code  
}

或者

window.addEventListener('hashchange', function() { 
  //code  
});

window.addEventListener('popstate', function() { 
  //code  
});

使用 jQuery

$(window).bind('hashchange', function() {
     //code
});

$(window).bind('popstate', function() {
     //code
});

经过一番研究后编辑：

不知何故，我似乎被 Mozilla 文档中的文档所迷惑。每当在代码中调用或时，都不会触发该popstate事件（及其回调函数onpopstate）。因此，原始答案并不适用于所有情况。pushState()replaceState()

但是，有一种方法可以通过根据 @alpha123 对函数进行猴子修补来规避此问题：

var pushState = history.pushState;
history.pushState = function () {
    pushState.apply(history, arguments);
    fireEvents('pushState', arguments);  // Some event-handling function
};

原答案

鉴于此问题的标题是“如何检测 URL 更改”，当您想知道完整路径何时更改（而不仅仅是哈希锚点）时，答案是您可以侦听popstate事件：

window.onpopstate = function(event) {
  console.log("location: " + document.location + ", state: " + JSON.stringify(event.state));
};

Mozilla Docs 中 popstate 的参考

目前（2017 年 1 月）全球92%的浏览器都支持 popstate。

使用 jquery（和插件）你可以做到

$(window).bind('hashchange', function() {
 /* things */
});

http://benalman.com/projects/jquery-hashchange-plugin/

否则是的，您必须使用 setInterval 并检查哈希事件（window.location.hash）中的更改

更新！一个简单的草稿

function hashHandler(){
    this.oldHash = window.location.hash;
    this.Check;

    var that = this;
    var detect = function(){
        if(that.oldHash!=window.location.hash){
            alert("HASH CHANGED - new has" + window.location.hash);
            that.oldHash = window.location.hash;
        }
    };
    this.Check = setInterval(function(){ detect() }, 100);
}

var hashDetection = new hashHandler();