javascript - 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 添加监听器，并在 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);