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

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

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

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

我创建了这个与hashchange事件非常相似的事件

// onurlchange-event.js v1.0.1
(() => {
    const hasNativeEvent = Object.keys(window).includes('onurlchange')
    if (!hasNativeEvent) {
        let oldURL = location.href
        setInterval(() => {
            const newURL = location.href
            if (oldURL === newURL) {
                return
            }
            const urlChangeEvent = new CustomEvent('urlchange', {
                detail: {
                    oldURL,
                    newURL
                }
            })
            oldURL = newURL
            dispatchEvent(urlChangeEvent)
        }, 25)
        addEventListener('urlchange', event => {
            if (typeof(onurlchange) === 'function') {
                onurlchange(event)
            }
        })
    }
})()

使用示例:

window.onurlchange = event => {
    console.log(event)
    console.log(event.detail.oldURL)
    console.log(event.detail.newURL)
}

addEventListener('urlchange', event => {
    console.log(event)
    console.log(event.detail.oldURL)
    console.log(event.detail.newURL)
})

在做一点chrome扩展时，我遇到了一个额外的问题:有时，页面变化而不是URL。

例如，只要进入Facebook主页，然后点击“主页”按钮。你将重新加载页面，但URL不会改变(单页应用程序样式)。

99%的时间里，我们在开发网站，这样我们就可以从Angular、React、Vue等框架中获取这些事件。

但是，在我的Chrome扩展(在香草JS)的情况下，我不得不听一个事件，将触发每个“页面变化”，这通常可以通过URL变化捕获，但有时它不会。

我自己的解决方案如下:

listen(window.history.length);
var oldLength = -1;
function listen(currentLength) {
  if (currentLength != oldLength) {
    // Do your stuff here
  }

  oldLength = window.history.length;
  setTimeout(function () {
    listen(window.history.length);
  }, 1000);
}

leoneckert解决方案，应用于窗口历史记录，当单页应用中的页面改变时，窗口历史记录也会改变。

这不是火箭科学，而是我发现的最干净的解决方案，考虑到我们在这里只检查一个整数相等，而不是更大的对象或整个DOM。

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

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

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

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

经过一番研究后编辑:

不知怎么的，我似乎被Mozilla文档上的文档愚弄了。当代码中调用pushState()或replaceState()时，popstate事件(及其回调函数onpopstate)不会被触发。因此，原来的答案并不适用于所有情况。

然而，有一种方法可以绕过这个问题，根据@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的卸载函数。它能处理所有的事情。

https://api.jquery.com/unload/

当用户导航离开页面时，卸载事件被发送到窗口元素。这可能意味着许多事情之一。用户可以点击一个链接离开页面，或者在地址栏中输入一个新的URL。前进和后退按钮将触发事件。关闭浏览器窗口将触发该事件。即使是重新加载页面也会首先创建卸载事件。

$(window).unload(
    function(event) {
        alert("navigating");
    }
);