深入了解requestFullscreen()方法实现全屏显示

1、全屏模式：requestFullscreen()方法用于发出异步请求实现元素全屏显示

const openFullscreen = () => {
     /* 获取()元素以全屏显示页面 */
    const full = document.getElementById('content')
    if (full.RequestFullScreen) {
        full.RequestFullScreen()
        //兼容Firefox
    } else if (full.mozRequestFullScreen) {
        full.mozRequestFullScreen()
        //兼容Chrome, Safari and Opera等
    } else if (full.webkitRequestFullScreen) {
        full.webkitRequestFullScreen()
        //兼容IE/Edge
    } else if (full.msRequestFullscreen) {
        full.msRequestFullscreen()
    }
}

2、取消全屏模式：exitFullscreen()方法退出全屏模式

const exitFullscreen = () => {
     function exitFullscreen() {
        if(document.exitFullScreen) {
            document.exitFullScreen();
        //兼容Firefox
        } else if(document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        //兼容Chrome, Safari and Opera等
        } else if(document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
        //兼容IE/Edge
        } else if(element.msExitFullscreen) {
            element.msExitFullscreen();
        }
    }
}

3、返回当前页面以全屏显示的element节点，如果没有使用全屏模式,则返回null

const getFullscreenElement = () => {
    return (        
        document.fullscreenElement ||
        document.mozFullScreenElement ||
        document.msFullScreenElement ||
        document.webkitFullscreenElement||null
    );
}

4、判断当前是否全屏，fullscreen已废弃，可以通过检查document.fullscreenelement是否为null来确定文档上是否启用全屏模式

const isFullScreen = () => {
  return  !! (
      document.fullscreen || 
      document.mozFullScreen ||                         
      document.webkitIsFullScreen ||       
      document.webkitFullScreen || 
      document.msFullScreen 
   );
}

5、返回一个布尔值，表明浏览器是否支持全屏模式。全屏模式只在那些不包含窗口化的插件的页面中可用.对于一个