要收听url更改，请参见以下内容:

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

如果您打算在某些特定条件后停止/删除侦听器，请使用此样式。

window.addEventListener('popstate', function(e) {
   console.log('url changed')
});

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

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

or

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

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

与jQuery

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

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

享受吧!

var previousUrl = '';
var observer = new MutationObserver(function(mutations) {
  if (location.href !== previousUrl) {
      previousUrl = location.href;
      console.log(`URL changed to ${location.href}`);
    }
});

我希望能够添加locationchange事件监听器。经过下面的修改，我们就可以这样做了

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

相比之下，window.addEventListener('hashchange'，() =>{})只会在url中标签后的部分发生变化时触发，而window.addEventListener('popstate'，() =>{})并不总是工作。

这种修改类似于Christian的回答，修改了history对象以添加一些功能。

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

这将修改这三个函数，以便所有函数都触发一个自定义locationchange事件供您使用，如果您想使用这些事件，还可以推送state和replacestate事件。

这些是修改:

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

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

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

注意，我们正在创建一个闭包，将旧函数保存为新函数的一部分，以便在调用新函数时调用它。

您在每次调用时都开始一个新的setInterval，而没有取消前一个——可能您只是想要一个setTimeout

用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();