js监听F11触发全屏事件

最新推荐文章于 2025-03-02 23:48:06 发布

lyj168997

最新推荐文章于 2025-03-02 23:48:06 发布

阅读量1.9k

点赞数 5

文章标签：前端 javascript vue.js

本文链接：https://blog.youkuaiyun.com/lyj168997/article/details/136372614

版权

当用户使用 F11 键进行浏览器全屏时，由于此时并非通过浏览器提供的 Fullscreen API 进入全屏模式，因此无法通过 fullscreenchange 事件来监听全屏状态的变化。在这种情况下，可以通过监听 resize 事件来检测浏览器窗口大小的变化，从而判断是否处于全屏模式。

下面是一个示例代码，演示如何通过监听 resize 事件来检测 F11 全屏操作：

let isFullScreen = false;

function checkFullScreen() {
  const fullscreenElement = document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement || ( window.innerHeight === screen.height);
  if (fullscreenElement) {
    isFullScreen = true;
    console.log("进入全屏模式");
  } else {
    isFullScreen = false;
    console.log("退出全屏模式");
  }
}

// 监听 resize 事件来检测全屏状态的变化
window.addEventListener("resize", checkFullScreen);

// 页面加载完毕，初始化全屏状态
window.addEventListener("load", checkFullScreen);

在上面的代码中，我们定义了一个 checkFullScreen 函数