js全屏,监听页面是否全屏
在JavaScript中,可以使用Document
接口的fullscreenElement
属性来检查页面是否处于全屏模式。同时,可以监听fullscreenchange
事件来响应全屏状态的变化。
以下是一个监听页面全屏状态变化的示例代码:
// 监听全屏变化事件
document.addEventListener('fullscreenchange', function () {
if (document.fullscreenElement) {
console.log('页面已进入全屏模式');
} else {
console.log('页面已退出全屏模式');
}
});
// 进入全屏的函数
function enterFullScreen() {
if (document.fullscreenEnabled && !document.fullscreenElement) {
document.documentElement.requestFullscreen().catch(err => {
console.error(err);
});
}
}
// 退出全屏的函数
function exitFullScreen() {
if (document.fullscreenElement) {
document.exitFullscreen().catch(err => {
console.error(err);
});
}
}
在这个示例中,enterFullScreen
函数尝试让页面进入全屏模式,而exitFullScreen
函数尝试退出全屏模式。同时,使用fullscreenchange
事件监听器来监听全屏状态的变化,并在控制台输出相应的信息。
评论已关闭