# 在手动刷新时自动触发浏览器网址变更事件

由于浏览器网址变更事件没有在刷新后触发运行动作，导致依赖事件触发的功能在手动刷新后因不会触发而无法使用
因此从网上查找测试的一种触发技巧。------边写边搜，属实找不到真正合意的方式。不能控制在浏览器环节就截停。
**``**

```
//beforeunload 事件是一个在浏览器即将卸载当前页面时触发的事件。这个事件允许开发者在页面关闭或刷新之前执行一些操作，例如提示用户保存未保存的更改。
//由于此事件的安全限制，因此想直接调用动作是做不到的，但可以借助它触发浏览器网址变更事件
//动作通过变更后自己给网址的附加信息判断是否是刷新，然后延时等一定时间网页开始刷新后再触发动作，就能错开刷新时无法执行而在手动刷新后执行功能。
//window.location对象 不用考虑，在这里不会生效，因此也不会触发变更。
//经测试，使用history.pushState()和history.replaceState()方法可行。
//加上由于锚点不会被发送到服务器，也不影响网页的加载和执行。因此使用锚点方式在网址附加信息在动作内判断。
window.addEventListener('beforeunload', function (e) {
    //这里是触发变更的代码
    //因为不需要判断是否重新加载，因此不调用 e.preventDefault(); 而且触发后长时间未判断，会报错获取不到插件信息。
    //虽然 e.preventDefault(); 调用后出现的弹窗也能触发变更，但为了使用体验，还是不能这样将就。
    var newUrl = window.location.href + '#update=true'; 
    history.replaceState(null, null, newUrl);
});
//history.pushState(): 创建一个新的历史条目，更新当前URL到指定的新状态，而无需重新加载页面。
//history.replaceState(): 替换当前的历史记录，不会创建新的历史条目。
//注意：使用需要根据实际情况更改，因为该事件在跳转也会触发。
//因此如果是本来url调用动作也会引起事件触发，而且因为并非真的刷新，从而地址栏添加的附加信息不会还原。会持续增加，刷新也没用那种。
//所以改为如下方式，缺陷是每次触发动作都会被多调用一次。以为的多次使用会调用更多次，但实际测试出来只多了一次。
window.addEventListener('beforeunload', function (e) {
    var currentUrl = window.location.href;
    var newUrl = currentUrl + '#update=true'; 
    history.replaceState(null, null, newUrl); 
    history.replaceState(null, null, currentUrl); //恢复原本的url
});
```
 
**事件设置如下，如果动作内判断。![](https://files.getquicker.net/_sitefiles/kc/kb/2025/01/08/034105_769338_mceclip1.png)**不**过由于网址变更触发在此情况下起始是会连续触发两次，第一次是代码带附加信息触发的变更，第二次是刷新后网址变回原本没有附加的触发，但第二次触发也没有在刷新后的执行，需要等待。如果是标签页关闭，则只会触发第一次**
![](https://files.getquicker.net/_sitefiles/kc/kb/2025/01/08/034445_769338_mceclip2.gif)![](https://files.getquicker.net/_sitefiles/kc/kb/2025/01/08/035242_769338_mceclip3.gif)
**因此可以借此判断是否是刷新还是关闭，加上多数情况并不需要短时间多实例执行，因此动作可以这样设置，一旦短时间有两个执行则等待指定时间或者判断是否未存在运行过的痕迹再执行。**
![](https://files.getquicker.net/_sitefiles/kc/kb/2025/01/08/042236_769338_mceclip4.png)![](https://files.getquicker.net/_sitefiles/kc/kb/2025/01/08/043159_769338_mceclip5.gif)
*为测试方便，我才控制台输入代码的，实则可以直接首次动作执行就一起插入进去。------本人测试用的浏览器为edge，此方式对地址栏直接复制黏贴不更改再运行的执行无效。差不多就这样了，完结睡觉。*