返回上一页并强制刷新的js代码

本文介绍了一种利用H5的localStorage功能实现返回上一页并强制刷新的方法,通过保存当前页面URL,在返回时重新加载该URL来达到目的。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

看了好多网上的关于返回上一页并刷新的代码。发现并不好用。

大致思路都是诸如:

window.history.go(-1);

window.location.href=document.referrer;

或者window.location.reload();

然而并不好用,于是改变思路,决定用H5支持的localstorage功能实现,具体功能方法参百度。
例如:列表页的编辑功能(即进入编辑页前,先存下当前列表的url) 
//单编辑
      function editUserType(a){
         var key = $(a).attr('aceessKey');
         var url = "{:U('Admin/Admuser/usertypeedit')}"+"?key="+key;
         window.localStorage.setItem('previewurl',window.location.href); 
         window.location.href = url;
      }

到编辑页面的返回按钮触发的事件,取出刚才存下的url
//返回上一页
    $("#preview").click(function(){
        var url = window.localStorage.getItem('previewurl');
        localStorage.removeItem('previewurl'); 
        window.location.href = url;
    });
即可实现返回上一页并强制刷新了!
强制刷新还有一个思路就是带一个参数,参数值使用随机数
js :   window.location.href +'?version='+Math.random();


### 实现H5页面返回一页刷新 为了实现在HTML5应用中返回到前一个页面的同时刷新该页面,可以采用JavaScript来控制浏览器的历史记录以及触发页面重载。具体方法如下: 当用户希望回到之前的页面强制刷新它时,可以通过组合`window.history.back()`与特定条件下的页面刷新逻辑达成目标。对于某些场景下简单的回退操作可能不会引起页面更新的问题,可以在调用历史管理API之前先尝试通过编程方式改变URL状态而不实际加载新地址,再执行回退动作。 一种常见做法是在准备离开当前页前往上一页之际,利用`location.replace()`或修改hash值的方式使得浏览器认为已经发生了新的导航事件,从而确保后续的back()能够真正意义上重新请求服务器资源而不是仅仅从缓存读取[^1]。 另外,在特殊情况下比如UC浏览器可能出现返回功能异常的情况,这可能是由于框架内部机制或是浏览器自身的优化策略所引起的。针对这类问题的一个解决思路是增加版本号或者其他唯一标识作为查询字符串附加到链接后面,以此绕过浏览器对相同URL的缓存处理[^2]。 下面给出一段用于实现上述需求的代码片段: ```javascript function goBackAndReload(){ let url = window.location.href; // 添加时间戳防止缓存 history.pushState(null, null, `${url}?_t=${new Date().getTime()}`); setTimeout(() => { window.history.back(); }, 0); } ``` 此段脚本首先更改了当前窗口的位置属性以引入变化因子(如时间戳),接着立即安排了一个异步任务去执行history.back(), 这样做可以让浏览器感知到一次完整的前进-后退流程,进而达到预期效果。 值得注意的是,这种方法非适用于所有环境,特别是在一些严格遵循同源政策的安全上下文中可能会受到限制;而且不同的移动设备和浏览器之间也可能存在行为差异。因此建议开发者们在实施此类方案前充分考虑兼容性和用户体验因素[^4]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值