URL 参数更改时的侦听器事件

Question

我有一个带有分页和过滤器的单页应用程序，需要检测当前 URL 何时发生变化。有没有一种简单的方法可以将监听器添加到当前 URL 并在它更改时触发某些东西？ （也没有设置间隔！）

1. 用户登陆 www.foobar.com
2. 用户做某事，网址更改为 www.foobar.com?filter=hello
3. 我的函数运行

我已经尝试过 onhashchange 和 unbeforeunload，但都与此无关。

window.onbeforeunload = function(e) {
   alert ('url changed!');
};

window.onhashchange = function() { 
alert ('url changed!');  
}

有没有办法给 URL 添加一个监听器，并在它发生任何变化时触发一些东西？ （再次，单页应用，所以没有刷新）

Answer 1

如果不想使用 setInterval，可以覆盖history.pushState 事件：

(function(history){
    const pushState = history.pushState;
    history.pushState = function(state) {
        if (typeof history.onpushstate == "function") {
            history.onpushstate({state: state});
        }
        // Call your custom function here
        return pushState.apply(history, arguments);
    }
})(window.history);