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

Question

我有一个带有分页和过滤器的单页应用，需要检测当前网址何时发生变化。是否有一种简单的方法可以将侦听器添加到当前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);