苹果微信html页面缓存,Ios中微信页面返回上一页去除缓存几种常见思路
前言
这篇文章主要讲解决思路,不对各种概念进行过多讲解。
问题描述
开发微信H5页面的时候,在Ios微信内置浏览器中点击返回按钮返回上一页时,上一页面不会被刷新。
在浏览器缓存机制中,在返回上一页的操作中, html/js/css/接口等动静态资源不会重新请求,但是js会重新加载。但在Ios微信页面中js也会保存上一页面最后执行的状态,不会重新执行js。使用这种模式缓存机制可以加快渲染速度,但是部分数据需要经常展示和编辑的情况下回导致不同步。比如“详情页”跳转到“编辑页”,在“编辑页”中修改数据后返回到详情页中,“详情页”数据展示并未进行同步修改。
产生原因
这里提到一个概念,浏览器前进/后退缓存,(Backward/Forward Cache,BF Cache),当然也有人叫disk Cache。BF Cache 是一种浏览器优化,html标准并未指定其如何进行缓存,因此缓存行为是各浏览器实现不尽相同。由于不是Http缓存,所以通过头文件缓存设置no-cache是无效的。当然也不能以Http缓存机制来理解BF Cache。
解决思路
从网上看了几种比较常见的解决思路,下面简单讲解。
设置浏览历史当前记录
history.replaceState方法的参数与pushState方法一模一样,区别是它修改浏览历史中当前纪录。
var href = location.href;
var time = new Date().getTime();
href += href.indexOf('?') > -1 ? ('&time='+time) : ('?time=' + time);
history.replaceState({},"title",href);
// 比如当前页面地址为http://www.a.com; 通过history.replaceState修改后当前地址会变为http://www.a.com?time=xxx
网上这种解决思路比较多,实际情况中并不可行。
原因:Ios微信中调整到下一页面后并未将上一页面修改的url保持在历史记录中,以代码为例,返回上一页并未返回到http://www.a.com?time=xxx, 而是返回到http://www.a.com中。
通过时间差来判断是否需要重置
var prev = parseInt(new Date().getTime() / 1000);
var now = prev;
window.setInterval(function() {
now = parseInt(new Date().getTime() / 1000);
// 当前步骤与上一步骤时间差超过1秒,表示页面已经跳转过
// 时间差需要与间隔时间相对应
if (now - prev > 1) {
location.reload();
} else {
prev = now;
}
// 间隔时间设置为1秒
},1000);
原理:通过判断当前步骤与上一步骤的时间差来判断是否需要更新
缺点:间隔轮询时间差长度设置为多久比较好,不好掌控;
通过setInterval设置的间隔时间差并不是很精确;
并且两个页面之间的反复切换速度非常迅速的情况下也许会出现监测不到的现象。
通过localStorage控制是否需要刷新
localStorage.setItem("need-refresh",true);
$(function () {
var needRefresh = localStorage.getItem("need-refresh");
if(needRefresh) {
localStorage.removeItem("need-refresh");
location.reload();
}
});
原理:通过获取浏览器保存的key来决定页面是否需要刷新
缺点:当页面关闭再重新打开时,key(也就是代码中的need-refresh)key值为true,会导致页面加载两次,造成重复渲染
通过pageshow事件决定是否需要刷新页面
window.addEventListener('pageshow',function(e) {
// 通过persisted属性判断是否存在 BF Cache
if (e.persisted) {
location.reload();
}
});
原理:pageShow事件在页面显示即会触发,无论页面是否来自BF Cache。通过检测persisted属性即可判断是否存在 BF Cache 行为。
优点:大部分浏览器都支持pageShow方法与persisted属性,并且需要的代码量只需要短短4行即可。
缺点:每种浏览器中BF Cache的机制是不同的,部分浏览器中的Bf Cache还是会重新执行js代码,会造成重复渲染效果。当然这篇文章中我们只考虑Ios中的微信页面, 所以是不存在问题。
苹果微信html页面缓存,Ios中微信页面返回上一页去除缓存几种常见思路相关推荐
- html ios返回后刷新页面,Ios中微信页面返回上一页去除缓存几种常见思路
前言 这篇文章和第,.年过事工宗据指数遍互业经搞断果会主要讲解决思路,不对各种概念进行抖要支圈者器说是事天开的.年后编定功口小发还应久剑过多讲解. 问题描述 开发微信H5页面的时候,在Ios微信内置浏 ...
- 微信中苹果h5页面用window.history.go(-1)返回上一页页面不会重新加载/刷新
微信中h5页面用window.history.go(-1)返回上一页页面不会重新加载问题问题描述:在实际开发中遇到这样一个问题,业务需求涉及到返回上一页问题,第一时间想到了window.history ...
- 微信小程序中带参数返回上一页的方法总结(三种)
本篇文章给大家带来的内容是关于微信小程序中带参数返回上一页的方法总结(三种),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 方法一 把当前页面数据放入本地缓存( wx.setStor ...
- html页面中使用 JS 返回上一页及返回上一页并刷新,iframe中打开指定页面,跳转到指定页面
html页面中使用 JS 返回上一页及返回上一页并刷新,iframe中打开指定页面,跳转到指定页面. 常用方法: window.history.go(-1); //返回上一页 window.histo ...
- VUE中页面跳转的常用方式及返回上一页实现的两种方式
一.我们知道,如果是一个页面的某些部分切换变化,那不是网页之间的切换,而是子组件的切换:对于页面切换,我们需要知道的是整个页面的内容和路径都发生了改变.在原生JS中我们知道页面切换可以使用locati ...
- vue项目中阻止浏览器返回上一页
vue项目中在某个页面阻止浏览器返回上一页,适用移动端.PC端. 使用场景例如: 首页 与 A页面 来回跳转,那样点击浏览器返回时也会来回跳转,本想当页面在首页的时候就不再返回了,所以这个时候 ...
- ios内嵌h5返回上一页后空白触屏一下或者拉动一下,才会显示的问题
移动端开发react vue项目中,ios上点击返回的时候,会出现空白现象,触屏一下或者拉动一下,才会显示出来 也查找过很多资料,但都实现不了,包括#app设置为 position:absolute ...
- 微信小程序----返回上一页刷新或当前页刷新
WXRUI体验二维码 如果文章对你有帮助的话,请打开微信扫一下二维码,点击一下广告,支持一下作者!谢谢! 声明 bug: 在onShow中执行this.onLoad(),会导致页面第一次加载的时候数组 ...
- 微信小程序如何返回上一页的左上角小房子的坑
微信小程序如何返回上一页的左上角小房子的坑 头一次写小程序,写了几个插件和几个页面,写完后发现返回上一页的时候是直接返回到首页了 出现这一问题的唯一线索就是左上角的小房子,点击小房子会直接退回到首页, ...
最新文章
- 在Ruby中获取system()调用的输出
- 宁波Uber优步司机奖励政策(1月18日~1月24日)
- 阿里云物联网平台python开发手册_阿里云物联网平台体验(树莓派+Python篇)
- 微信小程序调用php,微信小程序调用PHP后台接口 解析纯html文本
- C语言优先级——取反和移位
- PAT——1022. D进制的A+B
- 第九章 结构体与共用体
- 解除单个文件的与svn服务器的关联
- getparent_Java文件类字符串getParent()方法(带示例)
- 选择在何处重构(下)
- 继续跟上--“永远不要对一个外行聊你的专业”
- 可变、不可变数据类型
- JavaIO编程之ReadLine
- 微信小程序云开发图片用作背景不显示
- 学校计算机ip设置路由器,路由器怎么设置ip 如何设置路由器ip地址【详细步骤】...
- iOS-苹果应用商店审核指南中文翻译
- gdc矫正_GDC 2015的众多游戏
- MFC中afx_msg
- AirPods Pro好在哪
- windows bat脚本教程