- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我想更新 window.location.search
无需重新加载文档 然后根据 window.location.search 中的更新值执行函数
。
当用户单击一个按钮时,该按钮的 onclick
事件会触发以下函数:
window.history.pushState({action : 'myAction'}, document.title, '?action=myAction');
到目前为止一切顺利。浏览器 URL 栏中的 window.location.search
更新。
但我找不到检测此更新的通用后台事件监听器 - 类似于 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));
这可行,但我相信必须有更优雅的方法。
最佳答案
我对下面的第二次尝试回答非常满意。
但我真的不喜欢:
history.back();
history.forward();
我采用它来手动触发 popstate
事件。
在实践中,我发现这种 hack 有时会奏效,有时会很慢,有时甚至会完全失败。
在纸面上,感觉太权宜之计了。
经过反复搜索和试验(这非常难以找到),我终于找到了手动触发 popstate
事件的正确语法。
它简单就像调度
这样:
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()
orhistory.replaceState()
won't trigger a popstate event. The popstate event will be triggeredby doing a browser action such as a click on the back or forwardbutton (or callinghistory.back()
orhistory.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();
来复制前进按钮的功能)。
但是,如上所述,这是我能想到的最好、最干净、最优化(就逻辑分离和 future 代码维护而言)的解决方案。如果有人有更好的主意,我会很乐意转移绿色勾号。
我暂时得出结论,使用可以检测查询字符串何时更新的后台事件监听器无法实现此效果。
相反,因为我知道确定查询字符串只需要检查:
window.history.pushstate
被调用时我可以使用以下内容:
window.addEventListener('load', checkQueryString);
和
window.history.pushState({action : 'myAction'}, document.title, '?action=myAction');
checkQueryString();
关于javascript - 如何监听 2019 年 window.location.search 的变化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58039669/
我正在尝试在 python 中编写正则表达式来查找目录路径:我的文本如下所示: text = "The public disk is: \\\\diskA\\FolderB\\SubFolderC\\
我想写一个LocationListener,它把最近最精确的位置作为它的位置。我打算在我的 LocationListener 中使用此代码: @Override public void
我想建立一个有光泽和 plotly 的交互式图表。 Shiny 有一个内置功能来获取有关用户交互的信息。比如:input$plot_click、input$plot_dblclick、input$pl
我正在使用 MobileFirst 提供的 WL.Device.Geo.acquirePosition(onGeoLocationSuccess, onGeoLocationFailure, opti
我最近开始使用 ionic 框架,它里面有 angular js。为了在屏幕之间导航,我使用了 $location.path 并且效果很好。但是,在我下载的一个示例中,我看到 $state.go 被用
谁能解释一下这种行为?我使用 history.pushState(null, null, '#test'); 推送历史状态。然后,当尝试使用console.log(window.location.ha
这里是相关代码: https://www.facebook.com/sharer/sharer.php?u={{$location.absUrl()}} https://www.facebook.c
这两个重定向之间有什么区别?我有一个应用程序,当我使用时,它可以在 chrome 和 android 4 上正常工作,但在 android 2.x.x 上不能正常工作 document.locatio
JavaScript 的区别是什么 window.location.href = window.location.href 和 window.location.reload() 功能? 最佳答案 如果
有什么区别 window.location.href="http://example.com"; window.location.replace("http://example.com"); wind
JavaScript 的区别是什么 window.location.href = window.location.href 和 window.location.reload() 功能? 最佳答案 如果
以下 3 个指令之间有区别吗? location ~* \.(png)$ { expires max; log_not_found off; } location ~ \.(png)$ {
位于正文末尾之前的以下脚本在 Internet Explorer 和 Chrome(以及任何其他浏览器)中都会被调用。但重定向到指定的 URL 仅发生在 IE 中。我还尝试了 window.locat
我正在使用 Angular ngRouter。我需要更改 url 路径以及搜索参数。我知道 $location.path 和 $location.search,但是有没有一个函数可以同时设置它们? 最
在angularjs中用$location和window.location哪个更好。 例如,我们可以使用$location.path() 或window.location.href 来完成同样的工作。
我在我的网站上使用上述 2 个命令。似乎它们对 95% 访问它应该触发的页面的人有效,但对其他人则不会。 有谁知道是否可以完全阻止这些 javascript 命令?我真的很头疼为什么它们有时不起作用。
这是我无法弄清楚的另一个错误。 我有这个类ExtendedLocation extends Location实例化时抛出 ClassCastExceptioncurrentGpsLocation =
我一直在尝试简单地将一个包含两个变量(一个字符串和一个位置)的类推送和读取到 firebase,但我一直收到此错误。 **com.google.firebase.database.DatabaseEx
我注意到 iPhone 上的“常用位置”似乎比监控 iOS 访问的应用程序 (https://developer.apple.com/reference/corelocation/clvisit) 使
在我的 javascript 代码中,在某些时候,我需要刷新窗口(用户上传了新图片但在页面中仍然可以看到它) 我想知道为什么 location.href = location.href 不刷新窗口?
我是一名优秀的程序员,十分优秀!