工作总结之全屏功能

开发中用到全屏的功能，然后遇到了一些问题。

功能点描述：在全屏的时候隐藏页面中的导航栏，改变了DOM结构。

首先我在开发中用的Chrome版本是85，并没有引发点击全屏时报错。但是！测试同学在测试过程中发现不能使用该功能
我首先排查的是没有获取到相应的Dom引发的错误，后来发现排查方向错误。经过一番周折后，发现是使用的Chrome版本问题。
测试同学使用的是95以上版本，原因可能是由于Chrome升级后部分功能没有向下兼容。

那如何更改呢？我之前使用变量来控制的显示和隐藏，不能用这种方法后，尝试使用Css强制隐藏，虽然方法比较暴力，但是有用呀。

在点击全屏之后通过选择器 document.querySelector的方式获取到需要隐藏的元素。然后完美解决报错问题。此处报错内容为PS: ( Cannot read properties of undefined (reading 'destroy'))

那么，在全屏之后使用esc退出后需要恢复之前的页面。那么此时需要监听页面的全屏事件来更改页面的Css样式。

使用方式，代码展示;

document.onfullscreenchange =  ( event ) => {
        if( !document.fullscreenElement ){
           // 此处写需要恢复的Css样式
        }
    };

　那么其中document.fullscreenElement这个判断是什么呢？这个参数是可以判断此时是全屏还是已经退出全屏状态的，退出全屏时，参数是null，因此可用此方法来进行判断。


小小菜鸟，继续成长吧~