移动端点击返回时强制页面刷新解决办法(pageshow)
在做移动端项目的时候经常遇到这样一个功能比如：
返回后页面不刷新，一些失效的信息依然显示在页面上。这个问题在iphone手机上会出现，在Android手机上返回时会自动刷新（由于手机机器种类不多，无法做更多测试，欢迎补充）。
为了解决这个问题实验了很多解决办法用计时器呀onload呀都不行，后来找到了一个方法pageshow。
onpageshow 事件在用户浏览网页时触发。
onpageshow 事件类似于 onload 事件，onload 事件在页面第一次加载时触发， onpageshow 事件在每次加载页面时触发，即 onload 事件在页面从浏览器缓存中读取时不触发，此外还有pagehide在不显示的时候触发。
为了查看页面是直接从服务器上载入还是从缓存中读取，可以使用 PageTransitionEvent 对象的 persisted 属性来判断。
window.addEventListener('pageshow', function(event) {
console.log("PageShow Event " + event.persisted);
console.log(event)
})
如果页面从浏览器的缓存中读取该属性返回 ture，否则返回 false。然后在根据true或false在执行相应的页面刷新动作或者直接ajax请求接口更新数据。这一点有个缺陷就是，无论是不是需要更新数据这个页面都会刷新，我们要做的只是数据变化了才需要更新。于是想到另一个办法在可能会出现数据变化的页面设置缓存，即为只要页面数据变化了就写缓存一条记录，在返回页面后检测到这条记录就说明需要页面刷新或调用接口刷新。
处理方法为：
// a.html 设置刷新 检测缓存是否有标志 要是有就说明数据有变化 a.html跳转到b.html页面
window.addEventListener("pageshow", function(){
if(sessionStorage.getItem("need-refresh")){
location.reload();
sessionStorage.removeItem("need-refresh");
}
}); // b.html 如果是数据变化了就写一条缓存 b.html返回到a.html页面
sessionStorage.setItem("need-refresh", true);
下面给出测试pageshow等的测试代码：地址http://www.ofoyou.com/blog/pageshow.html
<!DOCTYPE html>
<html>
<head>
<title>页面显示与隐藏</title>
<meta charset="utf-8">
<meta http-equiv="Pragma" content="no-cache">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.js"></script>
</head>
<body>
<a href="http://www.baidu.com">前往百度</a>
<input type="button" id="btnSetColor" value="变色" />
<ul id="list"></ul>
<script>
function dispLog(msg) {
var d = new Date();
$("<li />").text(d.toISOString().substr(14, 9) + " " + msg).appendTo("#list");
}
//PageTransitionEvent 的persisted属性检测是不是从缓存中拿的页面true是，false不是
window.addEventListener('load', function(event) {
dispLog("Load Event ");
})
$(window).ready(function() {
dispLog("Ready Event");
});
$("#btnSetColor").click(function() {
$("#btnSetColor").css("background", "red");
})
window.addEventListener('pageshow', function(event) {
dispLog("PageShow Event " + event.persisted);
console.log(event)
})
window.addEventListener('pagehide', function(event) {
dispLog("Pagehide Event " + event.persisted);
})
</script>
</body> </html>
移动端点击返回时强制页面刷新解决办法(pageshow)的更多相关文章
- iOS 12 tabbar 从二级页面返回时，出现跳动解决办法
APP push一个界面,返回的时候,tabBar上的图标和文字出现一个从上往下的神奇动画 经过测试发现,如果使用系统OS12.1 UINavigationController + UITabBarC ...
- 小程序wx.previewImage查看图片再次点击返回时重新加载页面问题
wx.previewImage预览图片这个过程到底发生了什么? 首先我们点击图片预览,附上查看图片代码: <image class="headImg" data-src=&q ...
- [转]delphi 防止刷新时闪烁的终极解决办法
{ 防止刷新时闪烁的终极解决办法(对付双缓冲无效时) }Perform($000B, 0, 0); //锁屏幕 防止闪烁 // 做一些会发生严重闪烁的事情.. //解锁屏幕并重画Perform($00 ...
- (转载)js(jquery)的on绑定点击事件执行两次的解决办法
js(jquery)的on绑定点击事件执行两次的解决办法—不是事件绑定而是事件冒泡 遇到的问题:jquery中用.on()给页面中新加的元素添加点击事件时,点击事件源,绑定的事件执行两次,这里的ale ...
- Eclipse编辑jsp、js文件时卡死现象的解决办法汇总
使用Eclipse编辑jsp.js文件时,经常出现卡死现象,在网上百度了N次,经过N次优化调整后,卡死现象逐步好转,具体那个方法起到作用,不太好讲.将所有用过的方法罗列如下: 1.取消验证 windo ...
- Redis 3.0版本启动时出现警告的解决办法
原文:http://m.blog.csdn.net/article/details?id=50864933 Redis 3.0.7版本启动时出现警告的解决办法 发表于2016/3/12 12:52:4 ...
- dedecms添加文章时提示标题为空，编辑文章时编辑器空白的解决办法
dedecms添加文章时提示标题为空,编辑文章时编辑器空白的解决办法 dedecms出现这个问题与代码无关,主要是和PHP的版本有关,用的PHP5.4,更换成PHP5.2之后就不会有这个问题了. 问题 ...
- PHPmailer发送邮件时的常见问题及解决办法
来源:http://www.chinastor.com/a/jishu/mailserver/0G392262014.html 使用PHPmailer发送邮件时的常见问题总结: 一,没有定义发送邮箱$ ...
- jquery 的ajax无刷新上传文件之后，页面还是会莫名的刷新-----解决办法
文件上传用到全局数组: $_FILES 只需要把下面的 <button onclick="post()">提交</button> 改为 <input ...
随机推荐
- 如何暂停和继续运行Linux程序
我们通过shell窗口运行程序时,由于有的程序长时间运行,直到下班了都还没有返回运行结果.这个时候,我们又不能直接关闭shell窗口,不然前面的时间就白白运行了. 那有什么办法可以先暂停程序,明天再继 ...
- 【剑指offer】二叉搜索树与双向链表
一.题目: 输入一棵二叉搜索树,将该二叉搜索树转换成一个排序的双向链表.要求不能创建任何新的结点,只能调整树中结点指针的指向. 二.思路: 对于一棵搜索二叉树来说,中序遍历得到的即是有序的结果,所以整 ...
- 晨枫U盘启动盘制作工具V4.0-安装原版Win7
第一类方法(32位64位系统通用): [1]找到Windows7系统的iso镜像,用UltraISO或者WinRAR打开iso镜像,然后提取/解压所有文件到你的U盘根目录. [2]在你的U盘里找到名为 ...
- 解决npm ERR! Unexpected end of JSON input while parsing near的方法汇总
参考链接:https://segmentfault.com/a/1190000015646531
- [转]C++编译链接过程详解
C语言的编译链接过程要把我们编写的一个c程序(源代码)转换成可以在硬件上运行的程序(可执行代码),需要进行编译和链接.编译就是把文本形式源代码翻译为机器语言形式的目标文件的过程.链接是把目标文件.操作 ...
- 如何创建线程第一种继承Thread类
步骤 1:定义一个类 继承Thread类.2:重写Thread类的run方法.3:直接创建Thread的子类对象创建线程.4:调用start方法开启线程并调用线程的任务run方法执行.-------- ...
- SQL 、NoSQL数据库教程
前言: 嗯,先说说数据库的分类吧,其实主要大的分类就是关系型数据库(SQL)和非关系型数据库(NoSQL); 实验楼上有常见的数据库教程,这里做一个整理,希望对你学习数据库方面的知识有所帮助: 关系型 ...
- js简易计算器底层运算逻辑(带撤销功能)
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- 机器人meta标签和X-Robots-Tag HTTP标头规格
抽象 本文档详细介绍了页级索引设置如何让您控制Google如何通过搜索结果提供内容.您可以通过在(X)HTML页面或HTTP标头中包含元标记来指定这些标记. 笔记 请注意,只有当抓取工具被允许访问包含 ...
- Firewalld防火墙：端口转发与流量均衡
firewalld和iptables的关系 firewalld自身并不具备防火墙的功能,而是和iptables一样需要通过内核的netfilter来实现,也就是说firewalld和iptables一 ...