uniapp H5中ios跳转后返回上一页页面白屏

最新推荐文章于 2024-09-03 18:03:15 发布

呆子小木心

最新推荐文章于 2024-09-03 18:03:15 发布

阅读量2.9k

点赞数

分类专栏： H5 uniapp 文章标签： uni-app javascript 开发语言 ios android

本文链接：https://blog.csdn.net/cc6_66/article/details/126952204

版权

uniapp 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

使用uniapp开发的H5页面中，使用window.location.href跳转到别的系统页面（就是A-H5页面跳转到B-H5页面），返回上一页时（就是B回退到A时），ios系统页面出现了白屏，而Android端没问题。

处理方法之一：

//先获取并判断当前处于什么系统，如何获取当前页面处于什么手机系统可通过uniapp提供的uni.getSystemInfo
if(whatSystem == "iPhone"){
   window.onpageshow = function(event) {
       if (event.persisted) {
          window.location.reload()
       }
   };
}

处理方法之二：

//先判断白屏页面的高度为0，再刷新页面
this.$nextTick(()=>{
	const query = uni.createSelectorQuery().in(this);
	query.select('#home').boundingClientRect(data => {
		 if(data.height == 0){  
			window.location.reload();
		 }
	 }).exec();
})

补充记录一下：window.onpageshow 事件

onpageshow 事件在用户浏览网页时触发。
onpageshow 事件类似于 onload 事件，onload 事件在页面第一次加载时触发， onpageshow 事件在每次加载页面时触发，即 onload 事件在页面从浏览器缓存中读取时不触发。
为了查看页面是直接从服务器上载入还是从缓存中读取，你可以使用 PageTransitionEvent 对象的 persisted 属性来判断。如果页面从浏览器的缓存中读取该属性返回 ture，否则返回 false。