在现代浏览器(IE8+， FF3.6+， Chrome)中，你可以只听窗口上的hashchange事件。

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

例子

下面我将撤销所有URL更改，以保持滚动:

<script type="text/javascript">
  if (window.history) {
    var myOldUrl = window.location.href;
    window.addEventListener('hashchange', function(){
      window.history.pushState({}, null, myOldUrl);
    });
  }
</script>

请注意，以上使用的历史api可用于Chrome, Safari, Firefox 4+和Internet Explorer 10pp4+

在一个单独的线程中找到了一个工作答案:

没有一个事件是永远有效的，对于大多数大型spa来说，monkey patch pushState事件是非常偶然的。

所以聪明的投票对我来说是最有效的。您可以添加任意多的事件类型，但这些似乎对我来说做得很好。

为TS编写，但很容易修改:

const locationChangeEventType = "MY_APP-location-change";

// called on creation and every url change
export function observeUrlChanges(cb: (loc: Location) => any) {
  assertLocationChangeObserver();
  window.addEventListener(locationChangeEventType, () => cb(window.location));
  cb(window.location);
}

function assertLocationChangeObserver() {
  const state = window as any as { MY_APP_locationWatchSetup: any };
  if (state.MY_APP_locationWatchSetup) { return; }
  state.MY_APP_locationWatchSetup = true;

  let lastHref = location.href;

  ["popstate", "click", "keydown", "keyup", "touchstart", "touchend"].forEach((eventType) => {
    window.addEventListener(eventType, () => {
      requestAnimationFrame(() => {
        const currentHref = location.href;
        if (currentHref !== lastHref) {
          lastHref = currentHref;
          window.dispatchEvent(new Event(locationChangeEventType));
        }
      })
    })
  });
}

使用

observeUrlChanges((loc) => {
  console.log(loc.href)
})

在做一点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。

看看jQuery的卸载函数。它能处理所有的事情。

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

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

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

虽然这是一个老问题，但位置栏项目非常有用。

var LocationBar = require("location-bar");
var locationBar = new LocationBar();

// listen to all changes to the location bar
locationBar.onChange(function (path) {
  console.log("the current url is", path);
});

// listen to a specific change to location bar
// e.g. Backbone builds on top of this method to implement
// it's simple parametrized Backbone.Router
locationBar.route(/some\-regex/, function () {
  // only called when the current url matches the regex
});

locationBar.start({
  pushState: true
});

// update the address bar and add a new entry in browsers history
locationBar.update("/some/url?param=123");

// update the address bar but don't add the entry in history
locationBar.update("/some/url", {replace: true});

// update the address bar and call the `change` callback
locationBar.update("/some/url", {trigger: true});

经过一番研究后编辑:

不知怎么的，我似乎被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。