微信浏览器中的全屏异常、应用切换异常问题探究

现象

在微信浏览器中，有两种情况容易引发异常：

1、微信浏览器中某一个元素处于全屏时，这时微信出现弹窗；

2、微信浏览器某一个元素处于全屏时，切换到其他应用，微信后台运行
  一段时间再切回来；

这时我们的页面将处于一个异常状态，既非全屏也非退出全屏状态，页面的退出全屏操作将失效，无法使网页恢复到初始状态，除非刷新微信浏览器，严重影响用户体验。

注意：笔者所说的两种现象均是在iframe嵌套的内部网页中出现，猜测在非iframe的情况下也会引发，但尚未核实，如有误，欢迎指出。

难点探究

这两种情况都有一个共同的特点：

1、异常状态使得我们的全屏逻辑完全不起作用。

2、这种状态是由于微信的机制导致，而微信没有提供相关api供我们调用。
因此我们基于浏览器的操作是完全不起作用的。

笔者在探究的基础上总结了一些结论，可供参考，现分享如下。

解决思路

• 1.避免在全屏时引发弹窗，如果业务逻辑不可改，那么就先退出全屏再触发弹窗。
  一个明显的例子是，假如我们在某个元素全屏的状况下，查询设备是否支持摄像头，将导致微信询问是否允许开启摄像头，这时引发页面异常。可采用的解决方案是：先退出全屏，而后查询设备是否支持摄像头。

• 2.在全屏时切换到微信之外的其他应用引发的页面异常问题，可采用H5的visibilitychange事件使页面重新加载来解决。
  visibilitychange事件的作用是，在浏览器标签页被隐藏或显示的时候触发。经核实，在切换微信浏览器时也会触发该事件。

document.addEventListener("visibilitychange", 
	function() {
	  const state = document.visibilityState;
	  if(state === 'visible'){
	  	window.location.reload();
	  }
});