IOS浏览器点击后退后,页面空白

问题场景:

项目中在别人的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()

    }

})

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值