进入退出全屏相关代码
一般情况下,这些代码够用了。但是对于像页面A、页面B都有进入退出全屏的按钮,同时页面A、B都有链接可以切换到彼此的页面。当页面A进入全屏后,切换进入页面B,页面B同样会处于全屏状态(在本地调试,这样操作的情况下,页面A会退出全屏,再切换到页面B,页面B不处于全屏),但页面B通过checkFull拿到的状态是false。
将是否全屏的状态存放在sessionStorage里,切换全屏状态及页面A、B都可以正常获取是否全屏的状态。测试页面A进入全屏,切换进入页面B,然后触发退出全屏方法,然后发现报错了,再切换回页面A去触发退出全屏的方法一样报错。
因为在全屏状态下,切换页面,获取到的页面checkFull是false,所以页面不能执行退出全屏方法,报错反而才应该是正常的。
但因为切换后的页面在视觉上仍处于全屏,所以打算使用js模拟esc按下退出全屏。
本来打算在exitMethod.call(document)的位置添加try...catch,然后在catch中触发模拟方法。很认真看了参考文章,还是不明白为什么没有捕获到异常,就不用try...catch。用一个变量存放是否是在全屏状态下切换过页面,每次点击退出全屏的时候先做如下判断:
更新上服务器,以为稳了,再次测试发现点击退出全屏,但fireKeyEvent有被触发。
后来想,页面切换完后判断是否是全屏状态下并发生页面切换(判断changePageStatus是否为true),是——就触发全屏方法。全屏方法是触发了,但是没有效果。
打算复用上面exitFullBefore,将下面的分支改成先触发页面全屏后,在触发退出全屏方法。修改如下:
setTimeout的值设置为50,是因为间隔时间过短时,document的全局状态还没有修改,触发退出全屏方法将报上图错误。只是这种方式肉眼可见的闪烁。
后面多次测试后发现,页面全屏后在切换页面,切换后的页面确实不是出于全屏状态,不过浏览器会保持全屏占满整个显示器,而因为页面的大小设置与浏览器一样,所以看起来切换后的页面是处于全屏状态,调整网页大小后,可以发现区别,如将网页缩小到80%。