如何监听 2019 年 window.location.search 的变化

Question

我想更新 window.location.search 而不重新加载文档，然后根据 window.location.search.[=18= 中的更新值执行函数]

当用户单击按钮时，该按钮的 onclick 事件会触发以下函数：

window.history.pushState({action : 'myAction'}, document.title, '?action=myAction');

到目前为止一切顺利。 window.location.search 在浏览器 URL 栏中更新。

但我找不到检测此更新的通用后台事件侦听器 - 类似于 onhashchange 但用于查询字符串。

我能想到的最好的是：

window.history.pushState({action : 'myAction'}, document.title, '?action=myAction');
window.history.pushState({action : 'myAction'}, document.title, '?action=myAction');
window.history.back();

window.addEventListener('popstate', () => console.log(event.state.action));

这可行，但我相信一定有更优雅的方法。

Answer 1

最终答案：

我对下面的第二次尝试回答非常满意。

但我真的不喜欢:

history.back();
history.forward();

我采用它来手动触发 popstate 事件。

在实践中，我发现这个 hack 有时有效，有时很慢，有时甚至完全失败。

纸上谈兵，感觉太临时了。

经过反复搜索和试验（很难找到），我终于找到了手动触发 popstate 事件的正确语法。

简单dispatching这个:

new Event('popstate')

像这样：

let myEvent = new Event('popstate');
window.dispatchEvent(myEvent);

所以最后的代码是：

window.history.pushState({action : 'myAction'}, document.title, '?action=myAction');
let queryStringChange = new Event('popstate');
window.dispatchEvent(queryStringChange);

我能想到的最佳答案（第二次尝试）：

基于以下内容：

我确定查询字符串只需要检查：

页面加载或重新加载时；
当调用window.history.pushstate时；
或当（@Kaiido 在下面的评论中敏锐地指出）通过前进和后退按钮访问页面时

我也知道：

window.load 事件侦听器涵盖第 1 点。;
window.popstate 事件侦听器涵盖第 3 点。;

这只剩下第 2 点。

处理第2点

如 MDN 报道：

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).

Source: https://developer.mozilla.org/en-US/docs/Web/API/Window/popstate_event

但这意味着而不是使用（如我第一次尝试，如下所示）：

window.history.pushState({action : 'myAction'}, document.title, '?action=myAction');

checkQueryString(); // DIRECT INVOCATION OF FUNCTION

我可以改用：

window.history.pushState({action : 'myAction'}, document.title, '?action=myAction');
history.back();
history.forward();

这意味着无需直接调用该函数，我现在可以让涵盖 Point 3 的相同 window.popstate 事件侦听器完成其工作，让我更清晰、逻辑更分离的代码。

N.B. 我觉得...很奇怪...单独按下前进按钮会触发window.popstate 事件侦听器，但调用 window.history.pushState() 不会...（需要立即添加 history.back(); history.forward(); 以复制转发按钮的功能）。

但是，如上所述，这是我能想到的最好、最干净、最优化（就逻辑分离和未来代码维护而言）的解决方案。如果有人有更好的主意，我会很乐意转移绿色勾号。

第一次尝试回答：

我暂时得出结论，使用可以检测查询字符串何时更新的后台事件侦听器无法实现此效果。

相反，因为我知道可以确定查询字符串只需要检查：

当页面加载或重新加载时
当 window.history.pushstate 被调用时

我可以使用以下内容：

window.addEventListener('load', checkQueryString);

和

window.history.pushState({action : 'myAction'}, document.title, '?action=myAction');

checkQueryString();

如何监听 2019 年 window.location.search 的变化

How to listen for changes to window.location.search in 2019

html

javascript

query-string

pushstate

popstate

最终答案：

我能想到的最佳答案（第二次尝试）：

第一次尝试回答：