前端项目开发时，实现点击按钮，浏览器全屏的方法及踩坑记录

踩坑代码如下：

// 按钮的dom结构
<img src="@/assets/images/full-screen.png" class="full-screen" @click="fullScreen"/>

// vue3中定义相关事件、逻辑
const fullScreenFlag = ref(false);

onMounted(() => {
    window.addEventListener("fullscreenchange", () => {
        fullScreenFlag.value = !!document.fullscreenElement;
    });
});

// 全屏按钮
const fullScreen = () => {
  const el = document.documentElement;
  // 如果是全屏，退出; 否则，进入全屏
  fullScreenFlag.value ? document.exitFullscreen() : el.requestFullscreen();
};

该代码可以通过“按钮”实现进入全屏、退出全屏的操作，但是如果使用键盘的F11进入全屏后，无法通过“按钮”退出全屏，原因：window.addEventListener("fullscreenchange"）无法捕获到F11的全屏事件以及Esc退出全屏事件，所以，在监听事件里，无法判断当前屏幕状态；【即document.fullscreenElement判断是否全屏，如果通过F11、Esc操作后，该判断方法无效】，因此，要想解决该问题，可从如下角度出发：

1.通过 window.addEventListener("resize"）事件监听窗口的变化，判断是否全屏，然后修改变量；

2.禁用键盘的F11、Esc按键事件，当用户按下这两个按键时，执行自定义全屏的方法；

具体代码如下：

// 按钮的dom结构
<img src="@/assets/images/full-screen.png" class="full-screen" @click="fullScreen"/>

// vue3中定义相关事件、逻辑
const fullScreenFlag = ref(false);

onMounted(() => {
    window.addEventListener("resize", () => {
      fullScreenFlag.value = !!document.fullscreenElement;
    });
    window.addEventListener("keydown", keyDown);
});


// 全屏按钮
const fullScreen = () => {
  const el = document.documentElement;
  // 如果是全屏，退出; 否则，进入全屏
  fullScreenFlag.value ? document.exitFullscreen() : el.requestFullscreen();
};

// 键盘事件
const keyDown = (event: any) => {
  if (event.keyCode === 122) { // F11: 122
    // 由于F11全屏，window无法捕获fullscreenchange监听事件，故按F11时，执行我们自定义的全屏事件
    !fullScreenFlag.value && fullScreen(); // 如果为false，退出全屏
    event.returnValue = false; // 禁用F11
  } else if (event.keyCode === 27) { // Esc: 27
    fullScreenFlag.value && fullScreen(); // 如果为true，退出全屏
    event.returnValue = false; // 禁用Esc
  }
};

通过以上方法，即可实现无论是按F11全屏，还是用户点击按钮全屏，以及Esc退出全屏都没有任何问题。

以上内容纯属个人开发过程中遇到的问题及总结，如有雷同，纯属巧合，如有错误，可联系博主修改，非常感谢！如果文章对你有帮助，欢迎留下你的👍👍！