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()

    }

})

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！