JavaScript全屏，监听页面是否全屏

在JavaScript中，直接监听浏览器是否进入全屏模式并不直接支持，因为全屏API主要是关于请求和退出全屏模式的，而没有直接的监听器可以告知页面何时进入或退出全屏模式。但是，你可以通过在你的代码中跟踪全屏状态的改变来模拟这个功能。

以下是一个基本的示例，展示了如何使用全屏API来请求全屏模式，并在请求成功或失败时更新一个状态变量：

javascriptlet isInFullscreen = false;
 
// 全屏请求函数
function requestFullscreen(element) {
if (element.requestFullscreen) {
element.requestFullscreen().then(() => {
isInFullscreen = true;
console.log("全屏模式已启用");
}).catch(err => {
console.error("无法进入全屏模式", err);
});
} else if (element.mozRequestFullScreen) { /* Firefox */
element.mozRequestFullScreen().then(() => {
isInFullscreen = true;
console.log("全屏模式已启用");
}).catch(err => {
console.error("无法进入全屏模式", err);
});
} else if (element.webkitRequestFullscreen) { /* Chrome, Safari 和 Opera */
element.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT).then(() => {
isInFullscreen = true;
console.log("全屏模式已启用");
}).catch(err => {
console.error("无法进入全屏模式", err);
});
} else if (element.msRequestFullscreen) { /* IE/Edge */
element.msRequestFullscreen().then(() => {
isInFullscreen = true;
console.log("全屏模式已启用");
}).catch(err => {
console.error("无法进入全屏模式", err);
});
}
}
 
// 退出全屏函数
function exitFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen().then(() => {
isInFullscreen = false;
console.log("已退出全屏模式");
}).catch(err => {
console.error("无法退出全屏模式", err);
});
} else if (document.mozCancelFullScreen) { /* Firefox */
document.mozCancelFullScreen().then(() => {
isInFullscreen = false;
console.log("已退出全屏模式");
}).catch(err => {
console.error("无法退出全屏模式", err);
});
} else if (document.webkitExitFullscreen) { /* Chrome, Safari 和 Opera */
document.webkitExitFullscreen().then(() => {
isInFullscreen = false;
console.log("已退出全屏模式");
}).catch(err => {
console.error("无法退出全屏模式", err);
});
} else if (document.msExitFullscreen) { /* IE/Edge */
document.msExitFullscreen().then(() => {
isInFullscreen = false;
console.log("已退出全屏模式");
}).catch(err => {
console.error("无法退出全屏模式", err);
});
}
}
 
// 假设你有一个元素需要全屏
const element = document.documentElement; // 例如整个文档或者某个特定元素
 
// 你可以通过调用 requestFullscreen 来进入全屏模式
// requestFullscreen(element);
 
// 如果你需要监听键盘事件或其他事件来退出全屏模式，你可以调用 exitFullscreen
// exitFullscreen();
 
// 你可以通过 isInFullscreen 变量来检查当前是否在全屏模式
console.log(isInFullscreen ? "当前在全屏模式" : "当前不在全屏模式");

注意，上面的代码只是一个示例，你需要根据你的实际需求来调整它。另外，由于全屏API可能受到浏览器策略和用户偏好的限制，因此并非所有情况下都能成功进入全屏模式。