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 相关文章推荐
jQuery 加上最后自己的验证
Nov 04 Javascript
网站页面自动跳转实现方法PHP、JSP(上)
Aug 01 Javascript
js页面跳转的问题(跳转到父页面、最外层页面、本页面)
Aug 14 Javascript
浅谈window对象的scrollBy()方法
Jul 15 Javascript
基于JavaScript创建动态Dom
Dec 08 Javascript
js 中文汉字转Unicode、Unicode转中文汉字、ASCII转换Unicode、Unicode转换ASCII、中文转换
Dec 06 Javascript
纯JS实现图片验证码功能并兼容IE6-8(推荐)
Apr 19 Javascript
jQuery表单验证之密码确认
May 22 jQuery
AngularJS+Bootstrap3多级导航菜单的实现代码
Aug 16 Javascript
使用node.js实现微信小程序实时聊天功能
Aug 13 Javascript
vue微信分享出来的链接点开是首页问题的解决方法
Nov 28 Javascript
JS精确判断数据类型代码实例
Dec 18 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删除指定目录中的所有目录及文件的方法
2015/02/26 PHP
php短网址和数字之间相互转换的方法
2015/03/13 PHP
Thinkphp5框架使用validate实现验证功能的方法
2019/08/27 PHP
PHP pthreads v3下worker和pool的使用方法示例
2020/02/21 PHP
jQuery模拟下拉框选择对应菜单的内容
2017/03/07 Javascript
利用webstrom调试Vue.js单页面程序的方法教程
2017/06/06 Javascript
利用JS对iframe父子(内外)页面进行操作的方法教程
2017/06/15 Javascript
layui实现点击按钮给table添加一行
2018/08/10 Javascript
JS实现带阴历的日历功能详解
2019/01/24 Javascript
关于layui的下拉搜索框异步加载数据的解决方法
2019/09/28 Javascript
nodejs中内置模块fs,path常见的用法说明
2020/11/07 NodeJs
[02:42]DOTA2城市挑战赛收官在即 四强之争风起云涌
2018/06/05 DOTA
[52:06]完美世界DOTA2联赛决赛日 Inki vs LBZS 第一场 11.08
2020/11/10 DOTA
在Python程序中操作文件之isatty()方法的使用教程
2015/05/24 Python
vscode 远程调试python的方法
2017/12/01 Python
python爬取亚马逊书籍信息代码分享
2017/12/09 Python
SVM基本概念及Python实现代码
2017/12/27 Python
Python文本统计功能之西游记用字统计操作示例
2018/05/07 Python
详解Python:面向对象编程
2019/04/10 Python
python程序中的线程操作 concurrent模块使用详解
2019/09/23 Python
python pyecharts 实现一个文件绘制多张图
2020/05/13 Python
css3中transition属性详解
2014/09/02 HTML / CSS
CSS3中Transition动画属性用法详解
2016/07/04 HTML / CSS
澳大利亚的奢侈品牌:Oroton
2016/08/26 全球购物
您附近的水疗和健康场所:Spafinder(美国)
2019/07/05 全球购物
南京某公司笔试题
2013/01/27 面试题
自我鉴定200字
2013/10/28 职场文书
个人自荐信
2013/12/05 职场文书
物流管理专业毕业生自荐信
2014/03/04 职场文书
民族学专业求职信
2014/07/28 职场文书
学校元旦晚会开场白
2014/12/14 职场文书
CSS3 天气图标动画效果
2021/04/06 HTML / CSS
80行代码写一个Webpack插件并发布到npm
2021/05/24 Javascript
Python基础之条件语句详解
2021/06/16 Python
Java并发编程之Executor接口的使用
2021/06/21 Java/Android
SpringRetry重试框架的具体使用
2021/07/25 Java/Android