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

最新推荐文章于 2025-08-15 11:58:10 发布

Eshine、

最新推荐文章于 2025-08-15 11:58:10 发布

阅读量1.1k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： vue3 文章标签：前端 javascript 浏览器全屏事件 F11全屏冲突问题

本文链接：https://blog.csdn.net/listener_life/article/details/131416303

踩坑代码如下：

// 按钮的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.a