如何使用 JavaScript 观察 URL 的变化？

Question

documentation for the popstate Window event 状态：

Note that just calling history.pushState() or history.replaceState() won't trigger a popstate event. The popstate event will be triggered by doing a browser action such as a click on the back or forward button (or calling history.back() or history.forward() in JavaScript).

我需要一种方法来在 URL 发生变化时通过不触发 popstate 事件（例如 history.replaceState()）来执行一些代码。 ~~最好使用 MutationObserver API~~^[1]，并且绝对不会每隔 x 秒轮询 URL。

此外，hashchange 也行不通，因为我必须对 URL 中的每个变化采取行动，而不仅仅是散列部分。

这可能吗？

^[1] 解释了为什么 MutationObserver API 对此不起作用。

(其他) 相关问题：

Event when window.location.href changes
Attaching change notifier for window.location
How to detect URL change in JavaScript
history.pushState does not trigger 'popstate' event

Answer 1

您需要重新定义（换行）其他脚本正在使用的 history.replaceState：

(function(){
  var rs = history.replaceState; 
  history.replaceState = function(){
    rs.apply(history, arguments); // preserve normal functionality
    console.log("navigating", arguments); // do something extra here; raise an event
  };
}());

没有轮询，没有浪费，没有 re-writing，没有麻烦。

对 pushState 或您在编写用户脚本时 wish/need 的任何其他本机（如 ajax）执行相同的操作。

如何使用 JavaScript 观察 URL 的变化？

How to observe a change in the URL using JavaScript?

javascript

events

mutation-observers