问题场景:
项目中在别人的APP中嵌入一张卡片,作为入口进入自己项目的sdk, 需求是只有高版本的用户才能进入sdk,低版本的需要引导用户更新APP
在APP和sdk之间,加入一个H5页面,在APP中点击入口后,进入H5页面,页面内容是引导用户更新,在H5页面加载(window.onload)时,判断APP传来的版本号,如果是低版本,继续渲染H5页面,完成引导用户更新。高版本则直接跳转(window.location.href='')到sdk(此时H5页面内容没有渲染,是空白的)。
用户从sdk页面点击【后退】按钮(原生的后退按钮),回到H5,此时H5是空白的(原因是ios浏览器从缓存中读取了该页面,因为第一次进入时没有渲染出内容,所以后退回来后,也是空白的)
解决方法:
在页面加载时使用window.onpageshow = function(event){
if(event.persisted){ //event.persisted 判断是否从缓存里读取页面,第一次加载时是false 返回后加载页面时是true(因为从缓存读取的, 此时重新加载一边页面 )
window.location.reload()
}
}
如果是jQuery的话:
$(window).bind('pageshow',function(e){
if(e.originalEvent.persisted){
window.location.reload()
}
})