页面全屏

记录一下实现页面全屏切换和监听退出全屏时的事件处理

// 全屏切换
    toggleFullScreen() {
      if (this.isFullScreen()) {
        this.fullscreen = false;
        this.exitFullscreen();
      } else {
        this.fullscreen = true;
        let element = document.getElementById(''); // 要全屏的元素
        this.full(element); 
      }
    }
//全屏
    full(ele) {
      if (ele.requestFullscreen) {
        ele.requestFullscreen();
      } else if (ele.mozRequestFullScreen) {
        ele.mozRequestFullScreen();
      } else if (ele.webkitRequestFullscreen) {
        ele.webkitRequestFullscreen();
      } else if (ele.msRequestFullscreen) {
        ele.msRequestFullscreen();
      }
    }
// 退出全屏
    exitFullscreen() {
      if (document.exitFullScreen) {
        document.exitFullScreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
      }
    }
// 判断当前是否全屏
    isFullScreen() {
      return !!(document.webkitIsFullScreen || this.fullele());
    }
    fullele() {
      return (
        document.fullscreenElement ||
        document.webkitFullscreenElement ||
        document.msFullscreenElement ||
        document.mozFullScreenElement ||
        null
      );
    }
// 监听页面全屏切换事件
    window.addEventListener("resize", () => {
        if (this.isFullScreen()) {
          
        } else {
     
        }
    });