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 相关文章推荐
js判断undefined类型示例代码
Feb 10 Javascript
javascript点击按钮实现隐藏显示切换效果
Feb 03 Javascript
JavaScript中的Reflect对象详解(ES6新特性)
Jul 22 Javascript
js实现弹窗暗层效果
Jan 16 Javascript
Angular1.x自定义指令实例详解
Mar 01 Javascript
javascript 中iframe高度自适应(同域)实例详解
May 16 Javascript
用纯Node.JS弹出Windows系统消息提示框实例(MessageBox)
May 17 Javascript
详解JavaScript按概率随机生成事件
Aug 02 Javascript
用JS编写一个函数,返回数组中重复出现过的元素(实例)
Sep 14 Javascript
浅谈关于vue中scss公用的解决方案
Dec 02 Javascript
JS Canvas接口和动画效果大全
Apr 29 Javascript
JS前端使用canvas实现扩展物体类和事件派发
Aug 05 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
libmysql.dll与php.ini是否真的要拷贝到c:\windows目录下呢
2010/03/15 PHP
PHP中使用数组指针函数操作数组示例
2014/11/19 PHP
php匹配字符中链接地址的方法
2014/12/22 PHP
深入浅析PHP7.0新特征(五大新特征)
2015/10/29 PHP
PHP中substr_count()函数获取子字符串出现次数的方法
2016/01/07 PHP
php xhprof使用实例详解
2019/04/15 PHP
javascript中substr,substring,slice.splice的区别说明
2010/11/25 Javascript
Nodejs异步回调的优雅处理方法
2014/09/25 NodeJs
详解JavaScript编程中正则表达式的使用
2015/10/25 Javascript
js时间戳转为日期格式的方法
2015/12/28 Javascript
jquery动态切换背景图片的简单实现方法
2016/05/14 Javascript
Vue服务端渲染实践之Web应用首屏耗时最优化方案
2019/03/22 Javascript
vue 实现Web端的定位功能 获取经纬度
2019/08/08 Javascript
vue中created和mounted的区别浅析
2019/08/13 Javascript
Node配合WebSocket做多文件下载以及进度回传
2019/11/07 Javascript
jQuery操作动画完整实例分析
2020/01/10 jQuery
koa-passport实现本地验证的方法示例
2020/02/20 Javascript
跟老齐学Python之深入变量和引用对象
2014/09/24 Python
Python通过poll实现异步IO的方法
2015/06/04 Python
django中的HTML控件及参数传递方法
2018/03/20 Python
pandas的object对象转时间对象的方法
2018/04/11 Python
Python实现手写一个类似django的web框架示例
2018/07/20 Python
Python使用itchat模块实现简单的微信控制电脑功能示例
2019/08/26 Python
Python多线程正确用法实例解析
2020/05/30 Python
HTML5拖拉上传文件的简单实例
2017/01/11 HTML / CSS
博柏利美国官方网站:Burberry美国
2020/11/19 全球购物
叙述DBMS对数据控制功能有哪些
2016/06/12 面试题
优秀班干部事迹材料
2014/01/26 职场文书
英文推荐信格式范文
2014/05/09 职场文书
新教师培训方案
2014/06/08 职场文书
个性发展自我评价2015
2015/03/09 职场文书
求职信范文怎么写
2015/03/19 职场文书
工作迟到检讨书范文
2015/05/06 职场文书
导游词之云南省玉龙雪山
2019/12/19 职场文书
如何用Navicat操作MySQL
2021/05/12 MySQL
PyTorch 实现L2正则化以及Dropout的操作
2021/05/27 Python