自己实现的全屏预览如何与浏览器的f11共存

记录一下自己遇到的问题：先按f11进行全屏预览再按自己实现的取消预览不起作用

注意：按f11进行全屏预览与自己实现的全屏预览是不一样的，我们需要阻止f11的默认事件，然后使用我们自己定义的方法

1. 首先贴下html代码（这是实现全屏和取消全屏切换的html代码）

<!-- 全屏及取消全屏 -->
<div class="full_screen_operate" @click="handleFullScreen">
  <div :class="['icon', { cancel_full_screen_icon: ifFullScreen }]"></div>
  <div class="name">{{ ifFullScreen ? "取消全屏" : "全屏" }}
  </div>
</div>

2. 接下来讲下如何实现全屏和取消全屏

在实现全屏和取消全屏之前我们需要一个方法判断当前处于什么状态（全屏 or 非全屏）

 getFullScreenStatus() {
      this.ifFullScreen = !!(
        document.fullscreen
        || document.mozFullScreen
        || document.webkitIsFullScreen
        || document.webkitFullScreen
        || document.msFullScreen
      );
      return this.ifFullScreen;
    },

实现全屏的代码

// 全屏
    fullscreen() {
      const element = document.documentElement;
      if (element.requestFullscreen) {
        // 全屏
        element.requestFullscreen();
      } else if (element.webkitRequestFullScreen) {
        // 全屏
        element.webkitRequestFullScreen();
      } else if (element.mozRequestFullScreen) {
        // 全屏
        element.mozRequestFullScreen();
      } else if (element.msRequestFullscreen) {
        // 全屏 // IE11
        element.msRequestFullscreen();
      }
    },

实现取消全屏的代码

// 退出全屏
    exitFullscreen() {
      // 取消全屏
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
      }
    },

实现切换状态的代码

// 全屏/ 取消全屏
    handleFullScreen() {
      const element = document.documentElement;
      this.getFullScreenStatus();
      if (this.ifFullScreen) {
        // 已经是全屏状态 取消全屏
        this.exitFullscreen();
      } else {
        this.fullscreen();
      }
    },

然后就是实现按f11和自定义全屏事件保持统一，这里是关键

mounted() {
    // 监听页面容器改变
    window.addEventListener('resize', this.resizeEvent);
    window.addEventListener('keydown', this.keyDown);
  },
methods: {
    keyDown(event) {
      event.preventDefault(); // 阻止f11的默认事件
      // console.log('keyCode===', event.keyCode);
      if (event.keyCode == 122) { // f11的keyCode 是122
        this.handleFullScreen();
      }
    },
    resizeEvent () {
        this.getFullScreenStatus();
    }
 }

上面的代码分别监听了窗口大小改变事件和键盘按下事件，在按下f11的时候窗口大小会发生改变，所以这个时候需要更新状态（全屏/非全屏）， 同时在按下f11的实现需要阻止f11的默认事件，因为按f11是调用浏览器系统的方法，此时我们需要调用自己定义的切换全屏与非全屏状态的方法，保持统一。