JS实现返回上一页并刷新页面的方法分析


Posted in Javascript onJuly 16, 2019

本文实例讲述了JS实现返回上一页并刷新页面的方法。分享给大家供大家参考,具体如下:

正常情况下我们通过 history.back() 或者 history.go(-1) 返回上一级页面的时候,是不会刷新页面的。这种不刷新页面包含两种情况:

  1. 在 android 或者 pc 浏览器中看到的页面有刷新的效果,其实不是这样的,这个时候的所有的资源都是从缓存中加载来的。我们通过浏览器调试工具可以看到 from disk cache 或者 from memory cache
  2. 在 ios 中甚至于返回到了上一页后,连上一页的脚本文件都没有执行; (其实不是没有执行,是执行了onpageshow)

上网搜索 ios 返回上一页并刷新页面的时候,会看到的解决方案有监听 onpageshow 事件, 通过查看文档可以知道 onpageshow 事件中,可以通过使用 PageTransitionEvent 对象的 persisted 属性来判断,页面是直接从服务器上载入还是从缓存中读取; 如果页面从浏览器的缓存中读取该属性返回 ture,否则返回 false

在 ios 中如果要实现,返回上一页并刷新页面的话,可以在上一页的脚本文件中加入如下代码:

window.addEventListener('pageshow', function(event) {
 if(event.persisted) { // ios 有效, android 和 pc 每次都是 false
  sessionStorage.removeItem('refresh');
  location.reload();
 }
});

但是这种方式在 android 和 pc 的浏览器中没有效果,经过尝试会发现 android 和 pc 的浏览器中每一次进入 pageshow事件后,event.persisted 永远都是返回 false。

不管是在任何情况下,都会监听到 pageshow事件。既然能进入这个函数,那就得想办法在这个函数里判断是否需要刷新页面。可以通过缓存的方式 localStoragesessionStoragecookie

要在页面中判断是否需要刷新,那就得在从下一级返回过来的时候,往 cache中存入需要刷新。

sessionStorage.setItem('refresh', 'true');
history.go(-1);

然后在上一级也页面获取并判断

if(sessionStorage.getItem('refresh') === 'true') {
 sessionStorage.removeItem('refresh');
 location.reload();
}

综合兼容所有设备的返回上一页并刷新页面的方式为:

window.addEventListener('pageshow', function(event) {
 if(event.persisted) { // ios 有效, android 和 pc 每次都是 false
  location.reload();
 } else { // ios 除外
  if(sessionStorage.getItem('refresh') === 'true') {
   location.reload();
  }
 }
 sessionStorage.removeItem('refresh');
});

注意:

1. 在下一级页面返回的时候,要标记需要刷新页面(set)

2. 在判断完成后,一定要删除之前的存储(remove)避免出现无限重载的情况

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript判断变量是否为undefined的两种写法区别
Dec 04 Javascript
一个通过script自定义属性传递配置参数的方法
Sep 15 Javascript
jQuery实现DIV层淡入淡出拖动特效的方法
Feb 13 Javascript
javascript实现网页中涉及的简易运动(改变宽高、透明度、位置)
Nov 29 Javascript
JS获取元素多层嵌套思路详解
May 16 Javascript
angular 用拦截器统一处理http请求和响应的方法
Jun 08 Javascript
详解ElementUI之表单验证、数据绑定、路由跳转
Jun 21 Javascript
Node.JS更改Windows注册表Regedit的方法小结
Aug 18 Javascript
Angular2学习笔记之数据绑定的示例代码
Jan 03 Javascript
vue.js 微信支付前端代码分享
Feb 10 Javascript
父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法
Apr 25 Javascript
vue项目中jsonp跨域获取qq音乐首页推荐问题
May 30 Javascript
js+HTML5 canvas 实现简单的加载条(进度条)功能示例
Jul 16 #Javascript
微信小程序-API接口安全详解
Jul 16 #Javascript
jquery实现垂直无限轮播的方法分析
Jul 16 #jQuery
JavaScript解析JSON数据示例
Jul 16 #Javascript
微信小程序 Storage更新详解
Jul 16 #Javascript
微信小程序实现张图片合成为一张并下载
Jul 16 #Javascript
JQuery实现简单的复选框树形结构图示例【附源码下载】
Jul 16 #jQuery
You might like
php 过滤器实现代码
2010/08/09 PHP
php过滤html标记属性类用法实例
2014/09/23 PHP
浅谈PHP中pack、unpack的详细用法
2018/03/12 PHP
javascript+xml技术实现分页浏览
2008/07/27 Javascript
JQuery 构建客户/服务分离的链接模型中Table分页代码效率初探
2010/01/22 Javascript
通过jQuery打造支持汉字,拼音,英文快速定位查询的超级select插件
2010/06/18 Javascript
Javascript面象对象成员、共享成员变量实验
2010/11/19 Javascript
js 判断计算字符串长度/判断空的简单方法
2013/08/05 Javascript
js实现简单的星级选择器提交效果适用于评论等
2013/10/18 Javascript
AngularJS基础 ng-srcset 指令简单示例
2016/08/03 Javascript
Node.js实现兼容IE789的文件上传进度条
2016/09/02 Javascript
Bootstrap的fileinput插件实现多文件上传的方法
2016/09/05 Javascript
javascript九宫格图片随机打乱位置的实现方法
2017/03/15 Javascript
echart简介_动力节点Java学院整理
2017/08/11 Javascript
ReactJs实现树形结构的数据显示的组件的示例
2017/08/18 Javascript
基于JavaScript实现报警器提示音效果
2017/10/27 Javascript
vue.js中实现登录控制的方法示例
2018/04/23 Javascript
Angularjs之如何在跨域请求中传输Cookie的方法
2018/06/01 Javascript
关于layui的下拉搜索框异步加载数据的解决方法
2019/09/28 Javascript
使用Vue.set()方法实现响应式修改数组数据步骤
2019/11/09 Javascript
浅谈vuex为什么不建议在action中修改state
2020/02/02 Javascript
Python绘制七段数码管实例代码
2017/12/20 Python
Python实现Event回调机制的方法
2019/02/13 Python
Python 安装第三方库 pip install 安装慢安装不上的解决办法
2019/06/18 Python
python多线程并发实例及其优化
2019/06/27 Python
Django中自定义查询对象的具体使用
2019/10/13 Python
手把手教你从PyCharm安装到激活(最新激活码),亲测有效可激活至2089年
2020/11/25 Python
Django 用户认证Auth组件的使用
2020/11/30 Python
春秋航空官方网站:Spring Airlines
2017/09/27 全球购物
Lookfantastic香港官网:英国知名美妆购物网站
2018/06/19 全球购物
个性与发展自我评价
2014/02/11 职场文书
酒店秘书求职信范文
2014/02/17 职场文书
音乐剧猫观后感
2015/06/04 职场文书
优秀教师工作总结2015
2015/07/22 职场文书
六一儿童节园长致辞
2015/07/31 职场文书
任命书格式范文
2015/09/22 职场文书