微信中h5页面用window.history.go(-1)返回上一页页面不会重新加载问题
问题描述:
在实际开发中遇到这样一个问题,业务需求涉及到返回上一页问题,第一时间想到了window.history.go(-1)方法,这样做本身没有任何问题,但是在微信中,安卓手机还好返回上一页页面会重新加载,而ios却不会重新加载页面,这就很难受了。
解决方案:
网上查阅了很多资料发现很多方法都不可行,那些方法就不一一展示了,直接上最终代码。
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中的微信页面, 所以是不存在问题。
关于浏览器前进/后退缓存(BF Cache)问题详细参考:http://harttle.land/2017/03/12/backward-forward-cache.html
微信中h5页面用window.history.go(-1)返回上一页页面不会重新加载问题的更多相关文章
- 解决使用window.history.back(),返回上一页后,页面不刷新问题
window.onpageshow = function(event) { if (event.persisted) { window.location.reload(); } }
- js 页面history.back()返回上一页,ios 不重新加载ready的解决办法
参考自 http://blog.csdn.net/hbts_901111zb/article/details/76691900 项目中,主页面有很多输入字段,当由主页跳转到子页面, 将子页面的字段 s ...
- javascript解决在safari浏览器中使用history.back()返回上一页后页面不会刷新的问题
我们知道,在JavaScript中提供了一个window.history.back()方法用于返回上一页,另外也可以使用window.history.go(-1)返回上一页(跳转). 在其他的主流浏览 ...
- JavaScript返回上一页和返回上一级页面并刷新
JavaScript返回上一页和刷新当前页 window.history.go(-1); //返回上一页 window.history.back(); //返回上一页 //如果要强行刷新的话就是:wi ...
- HTML页面 js返回上一页
<input type="button" name="Submit" onclick="javascript:history.back(-1); ...
- 高并发分布式系统中生成全局唯一(订单号)Id js返回上一页并刷新、返回上一页、自动刷新页面 父页面操作嵌套iframe子页面的HTML标签元素 .net判断System.Data.DataRow中是否包含某列 .Net使用system.Security.Cryptography.RNGCryptoServiceProvider类与System.Random类生成随机数
高并发分布式系统中生成全局唯一(订单号)Id 1.GUID数据因毫无规律可言造成索引效率低下,影响了系统的性能,那么通过组合的方式,保留GUID的10个字节,用另6个字节表示GUID生成的时间(D ...
- js 页面之间的跳转、传参以及返回上一页
js实现html 页面之间的跳转传参以及返回上一页的相关知识点 一.页面之间的跳转传参 1.在页面之间跳转的方式有两种: window.location.href="test.html?nu ...
- JS 返回上一页并刷新,但不用重新加载整个页面(ajax实现)
需求 有三个页面A.B.C,点击A=>B,点击B=>C,在C中添加内容,点击确定返回到B,此时B页面需重新加载新的内容.再次点击B的返回按钮,希望返回到A而不是C. ===== 2017/ ...
- JS 重载页面,本地刷新,返回上一页
JS 重载页面,本地刷新,返回上一页 : <a href="javascript:history.go(-1)">返回上一页</a> <a href= ...
随机推荐
- android,getExternalStorageDirectory()和getExternalFilesDir()的区别
转载地址:https://blog.csdn.net/nugongahou110/article/details/48154859 之前看到一位网友的吐槽:当我把手机连接到电脑上时,在SD卡根目录看到 ...
- libcurl 中使用curl_multi_perform()函数执行订阅类型url的问题
前提概要 当需要同时处理多个url时,可采用curl_multi_perform方式执行,如下代码1: //初始化一个multi curl 对象 CURLM * curl_m = curl_multi ...
- how reset smartphone data.
question:how reset meizu smartphone solution one:hard step 1. power off your MEIZU smartphone. ste ...
- sql developer中英文切换
今天使用oracle sql developer时做调优建议时找到的建议显示为?的乱码,本人sql developer为中文版,修改为英文版后问题解决. 查看帮助菜单中的属性选项卡,user.lang ...
- windows10 、eclipse kepler配置maven环境
maven环境的配置需要先配置Java环境. 一.在wIn10 中配置maven环境,需要先下载maven压缩包,官网http://maven.apache.org/download.cgi,我选择下 ...
- javascript Object与Array用法
引用类型:引用类型是一种数据结构,用于将数据和功能组织在一起.引用类型的值是引用类型的一个实例. 一.Object ECMAScript中的对象其实就是一组数据和功能的结合. Object类型其实是所 ...
- 【[HAOI2008]木棍分割】
没写过几道的前缀和优化\(dp\) 第一问是小学生难度的二分 第二问就直接\(dp\)了 设\(dp[i][j]\)表示当前分割点在\(i\)之后,前面一共分割了\(j\)段的方案数 利用前缀和单调性 ...
- 2014-2015 ACM-ICPC East Central North America Regional Contest (ECNA 2014) A、Continued Fractions 【模拟连分数】
任意门:http://codeforces.com/gym/100641/attachments Con + tin/(ued + Frac/tions) Time Limit: 3000/1000 ...
- 融云SDK:获取用户Token的方法
融云SDK查看ServerAPI里面有个获取Token的方法,本以为只要传三个参数就可以.后来发现,在请求头有几个必须要传的参数,否则服务器返回401(未授权).拿获取Token接口为例子 如图所示, ...
- 两个list相加
>>> a = ['] >>> b = ['] >>> a+b ['] >>> a = [1,2] >>> b ...