JavaScript 全屏方案（分享）

基本实现

基本情况是属于只是鼠标点击全屏按钮

• document.exitFullscreen()，退出全屏
• Document.requestFullscreen()，开启全屏
• document.fullscreenElement，返回当前全屏元素

<template>
  <div>
    <el-button v-show="!hasFullScreen" @click="fullScreen"> 开启全屏 </el-button>
    <el-button v-show="hasFullScreen" @click="fullScreen"> 退出全屏 </el-button>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        // 全屏状态
        hasFullScreen: false,
      };
    },
    methods: {
      fullScreen() {
        // 已开启全屏，需要退出
        if (this.hasFullScreen && document.fullscreenElement) {
          document.exitFullscreen();
          this.hasFullScreen = false;
          // 未开启全屏，需要开启
        } else {
          document.documentElement.requestFullscreen();
          this.hasFullScreen = true;
        }
      },
    },
  };
</script>

特殊情况

存在按键盘F11、手动点全屏后中间的×，先说说几种方案

1. fullscreenchange，这个只能监听手动点击按钮的情况，监听不到F11、手动点×，这个方案就不行
2. 阻止键盘F11默认事件，然后手动调用 this.fullScreen()，这种方案其实也不行，正常情况下F11是可以监听到的，但是如果用户鼠标点击搜索栏时F11监听不到，通过F11开启全屏后，再次点击F11也监听不到，这个时候vue中的全屏状态就管理不了了（这里要说明一点，F11不属于全屏，只是隐藏了导航栏等，fullscreenchange 监听不到，document.fullscreenElement 也没有值，所以F11原生的事件直接用不了）
3. 最好的是通过innerHeight、outerHeight，来判断是否全屏

<template>
  <div>
    <el-button v-show="!hasFullScreen" @click="fullScreen"> 开启全屏 </el-button>
    <el-button v-show="hasFullScreen" @click="fullScreen"> 关闭全屏 </el-button>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        // 全屏状态
        hasFullScreen: false,
      };
    },
    mounted() {
      // 监听浏览器窗口来判断是否全屏，用来管理全屏状态
      window.addEventListener("resize", (e) => {
        // 这里我准备判断是否相等，但是不知道为什么会存在偏差
        // 我的电脑是16的偏差，我用我同事的电脑测试，有的是14 有的是18
        if (Math.abs(innerHeight - outerHeight) < 30) {
          this.hasFullScreen = true;
        } else {
          // 不需要重复修改，这里也有可能是用户修改窗口尺寸
          if(!this.hasFullScreen) return
          this.hasFullScreen = false;
        }
      });
    },
    methods: {
      fullScreen() {
        if (this.hasFullScreen && document.fullscreenElement) {
          document.exitFullscreen();
        } else {
          document.documentElement.requestFullscreen();
        }
      },
    },
  };
</script>