H5手机端监听用户点击返回时自动刷新上一个页面

瑞晟技术服务中心-耿瑞

已于 2022-02-05 15:48:36 修改

阅读量2k

点赞数 3

文章标签： javascript 前端 html5

于 2022-01-09 11:24:39 首次发布

本文链接：https://blog.csdn.net/weixin_45966674/article/details/122391248

版权

相信大家在用H5语法写手机端页面时大概率会遇到点击手机自带返回按钮返回上一页数据错乱没有刷新等问题

那么我们改怎么监听用户返回这个事件从而去做页面刷新或者其他操作呢
window对象的pageshow事件可以监听到返回按钮
window.location.reload() 可以刷新当前页面

那么假定我们的需求是从页面A跳转向页面B 在从页面B点击手机自带的返回按钮返回到页面A 当返回时页面A自动刷新

其实这个操作和页面B一点关系都没有

我们只需要在页面A中编写事件

window.addEventListener('pageshow', function (e) {
  if (e.persisted) {
        window.location.reload()
    }
})

如果需要返回时保留用户的某些操作你可以存在缓存里
然后页面一加载判断是否有缓存然后做完操作再把缓存清了

关注