iOS端APP返回上一页面时不加载JS数据
iOS端APP返回上一页面时页面不加载或刷新,JS就无法处理更新数据。
参考文档一
子页面 history.back() 返回上一页时,ios 不重新加载ready。
某项目中,主页面有很多输入的字段,当由主页跳转到子页面,在子页面处理数据后返回主页面,但不能将主页面中此前输入的字段刷新掉,所以必须要在子页面history.back()。 但由于ios和安卓机制不同,安卓会重新刷新主页面的ready,iOS则不会,因此尝试时监听pageshow来解决这个问题,在主页面的JS中加入如下代码
$(function () { var isPageHide = false; window.addEventListener('pageshow', function () { if (isPageHide) { window.location.reload(); } }); window.addEventListener('pagehide', function () { isPageHide = true; }); })
参考文档二
微信中苹果h5页面用window.history.go(-1)返回上一页页面不会重新加载/刷新
文章防丢,原文如下:
微信中h5页面用window.history.go(-1)返回上一页页面不会重新加载问题
问题描述:在实际开发中遇到这样一个问题,业务需求涉及到返回上一页问题,第一时间想到了window.history.go(-1)方法,这样做本身没有任何问题,但是在微信中,安卓手机还好返回上一页页面会重新加载,而ios却不会重新加载页面,这就很难受了。
解决方案:网上查阅了很多资料发现很多方法都不可行,那些方法就不一一展示了,直接上最终代码。
window.addEventListener('pageshow', function(e) { // 通过persisted属性判断是否存在 BF Cache if (e.persisted) { location.reload(); } });
因为我做的逻辑是在下一个要页面,进行存储咋 sesstion 里面,然后window.history.go(-1) 返回获取赋值,因为IOS 返回无法重现加载,利用上面代码进行了下修改
window.addEventListener('pageshow', function(e) { // 通过persisted属性判断是否存在 BF Cache if (e.persisted) { var objData=JSON.parse(sessionStorage.getItem('lolData')); if(objData){ $('#origin-place').val(objData.start_place); //赋值 $('#obj-place').val(objData.end_place); //赋值 } } });
这里有人会说直接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