600字范文,内容丰富有趣,生活中的好帮手!
600字范文 > 移动端返回强制刷新页面pageshow事件persisted总为false解决方案

移动端返回强制刷新页面pageshow事件persisted总为false解决方案

时间:2018-12-18 19:04:12

相关推荐

移动端返回强制刷新页面pageshow事件persisted总为false解决方案

返回后页面不刷新,一些失效的信息依然显示在页面上。这个问题在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,发现页面返回的时候persisted依然为false,这时候只好找其他方案解决。 这时候发现有一个window.performance对象,performance.navigation.type是一个无符号短整型

TYPE_NAVIGATE (0):

当前页面是通过点击链接,书签和表单提交,或者脚本操作,或者在url中直接输入地址,type值为0

TYPE_RELOAD (1)

点击刷新页面按钮或者通过Location.reload()方法显示的页面,type值为1

TYPE_BACK_FORWARD (2)

页面通过历史记录和前进后退访问时。type值为2

TYPE_RESERVED (255)

任何其他方式,type值为255 这真是我们需要的部分,于是可以预见,解决方案如下:

window.addEventListener('pageshow', () => {if (e.persisted || (window.performance && window.performance.navigation.type == 2)) {location.reload()}}, false)

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。