JS监听F11全屏与Vue组件实现方案

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);

export default {
  mounted() {
    // 添加窗口大小变化事件监听
    window.addEventListener("resize", this.checkFullScreen);
    window.addEventListener("load", this.checkFullScreen); // 也可以在这里初始化全屏状态
  },
  beforeDestroy() {
    // 移除窗口大小变化事件监听
    window.removeEventListener("resize", this.checkFullScreen);
    window.removeEventListener("load", this.checkFullScreen);
  },
  methods: {
    checkFullScreen() {
      const isBrowserFullScreen = window.innerHeight === screen.height;
      
      if (isBrowserFullScreen) {
        console.log("进入全屏模式");
      } else {
        console.log("退出全屏模式");
      }
    }
  }
};

window.onkeydown = function (event) {
    if (event.keyCode === 122) {
      event.preventDefault()
      event.returnValue = false
    }
  }