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