浏览器全屏事件

主要思路：添加keydown监听事件，阻止默认的全屏操作，手动触发进入全屏和退出全屏， 监听用户点击F11进入全屏和退出全屏的时候做相应的操作

 

问题：按F11退出浏览器全屏keydown监听不到

搜索之后得到监听不到F11退出全屏事件的原因：

Chrome故意防止在浏览器处于“全屏mode.”时按下F11时触发任何键盘事件侦听器这是为了防止恶意JavaScript阻止客户端离开“全屏mode.”

解决方案：

keydown事件结合fullscreenchange监听事件实现对进入全屏和退出全屏的监听

 完整代码如下：

private mounted() {
    window.addEventListener('keydown', this.KeyDown, true); // 监听按键事件
    const that = this;
    document.addEventListener('fullscreenchange', function (e) {
      if (document.fullscreenElement) {
        that.changeVedioPosition(true);
      } else {
        that.changeVedioPosition(false);
      }
    });
  }
  // 监听用户按键事件
  private KeyDown(event: any) {
    var isFull = !!(
      (document as any).webkitIsFullScreen ||
      (document as any).mozFullScreen ||
      (document as any).msFullscreenElement ||
      document.fullscreenElement
    );
    this.fullscreen = isFull;
    // F11的keyCode为122
    if (event.keyCode === 122) {
      event.preventDefault();
      if (this.fullscreen) {
        // 当前是全屏切换到非全屏状态
        this.fullscreen = false;
        this.exitFullscreen();
      } else {
        // 当前是非全屏切换到全屏状态
        this.handleFullScreen();
        this.fullscreen = true;
      }
    }
  }
  // 进入全屏
  private handleFullScreen() {
    var element = document.documentElement;
    if (element.requestFullscreen) {
      element.requestFullscreen();
    } else if ((element as any).webkitRequestFullScreen) {
      (element as any).webkitRequestFullScreen();
    } else if ((element as any).mozRequestFullScreen) {
      (element as any).mozRequestFullScreen();
    } else if ((element as any).msRequestFullscreen) {
      // IE11
      (element as any).msRequestFullscreen();
    }
  }
  // 退出全屏
  private exitFullscreen() {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if ((document as any).msExitFullscreen) {
      (document as any).msExitFullscreen();
    } else if ((document as any).mozCancelFullScreen) {
      (document as any).mozCancelFullScreen();
    } else if ((document as any).webkitExitFullscreen) {
      (document as any).webkitExitFullscreen();
    }
  }