如何优雅的全屏

因为工作需要，我们的直播平台需要全屏模式，这个全屏不是video的全屏，是自己定制的全屏。
那么这里就遇到了一系列的问题，因为F11 和ESC都可以取消全屏，而F11还可以进入全屏。
但是此全屏和我们需要的全屏还不是同一种。
反正很麻烦。
 

下面上代码，重点是实现的思路，而并不是代码，后面会讲思路

---

全屏检测函数，是否支持全屏

export function isFullScreen() {
  let isFull =
    document.fullscreenEnabled ||
    window.fullScreen ||
    document.webkitIsFullScreen ||
    document.msFullscreenEnabled;

  //to fix : false || undefined == undefined
  if (isFull === undefined) isFull = false;
  return isFull;
}

---

开启和取消全屏

/*全屏*/
export function enterFullScreen() {
  let docElm = document.documentElement;

  //W3C
  if (docElm.requestFullscreen) {
    docElm.requestFullscreen();
  }
  //FireFox
  else if (docElm.mozRequestFullScreen) {
    docElm.mozRequestFullScreen();
  }
  //Chrome等
  else if (docElm.webkitRequestFullScreen) {
    docElm.webkitRequestFullScreen();
  }
}

/*取消全屏*/
export function exitFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if (document.webkitCancelFullScreen) {
    document.webkitCancelFullScreen();
  } else if (document.msExitFullscreen) {
    document.msExitFullscreen();
  }
}

---

下面，重点来了，我们最好不要在全屏函数中写 全屏样式切换的代码，

这会带来一些错乱的问题，而且，用户会看到页面元素乱一下，然后又重新布局好，这种体验很差。

所以，我们在监听回调函数中写我们的全屏、分屏样式切换代码

 addScreenChangeListener(){
    document.addEventListener("fullscreenchange", ()=> {
       //在这里写分屏、全屏切换代码
    }, false);
  
    document.addEventListener("mozfullscreenchange",  ()=> {
        //在这里写分屏、全屏切换代码
    }, false);
  
    document.addEventListener("webkitfullscreenchange", ()=>  {
       //在这里写分屏、全屏切换代码
    }, false);
  }

 

OK，当然，其中还有些技巧，是因为我是用的react，异步刷新的问题，

这里就不赘述了，如果有人遇到同样的问题，欢迎交流。