当用户使用 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 函数来检测全屏状态，并在页面加载完成时和窗口大小变化时调用该函数。通过不断检测当前是否存在全屏元素，我们可以实现对 f11 全屏操作的监听和处理。
在 vue 中，可以在组件的生命周期钩子函数中添加监听和移除事件监听。例如，可以在 mounted 钩子函数中添加监听事件，在 beforedestroy 钩子函数中移除监听事件。这样可以确保在组件销毁时正确地清除事件监听，避免内存泄漏和性能问题。
下面是一个示例代码，演示如何在 vue 中监听窗口大小变化事件并在组件销毁时移除监听：
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("退出全屏模式");
}
}
}
};
在上面的代码中，我们在 vue 组件中使用 mounted 钩子函数添加窗口大小变化事件监听，在 beforedestroy 钩子函数中移除监听。同时，我们还提供了一个 checkfullscreen 方法用来检测全屏状态。
附：禁用f11,可以试试，可能无效。
据说死浏览器的行为，我们无法控制，但是有个思路，可以根据上面的监听事件来判断，若全屏呢，可以禁用某些行为。
window.onkeydown = function (event) {
if (event.keycode === 122) {
event.preventdefault()
event.returnvalue = false
}
}
总结
