在JavaScript中控制页面全屏主要涉及到requestFullscreen
和exitFullscreen
这两个方法,以及一些浏览器前缀以确保兼容性。
以下是一个简单的示例,展示如何使用JavaScript控制页面全屏:
// 进入全屏模式
function enterFullscreen(element) {
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.mozRequestFullScreen) { // Firefox
element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) { // Chrome, Safari & Opera
element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) { // IE/Edge
element.msRequestFullscreen();
}
}
// 退出全屏模式
function exitFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) { // Firefox
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) { // Chrome, Safari & Opera
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) { // IE/Edge
document.msExitFullscreen();
}
}
// 使用示例:点击按钮进入全屏模式
document.getElementById('fullscreen-button').addEventListener('click', function() {
enterFullscreen(document.documentElement); // 将整个文档设为全屏
});
// 使用示例:点击按钮退出全屏模式
document.getElementById('exit-fullscreen-button').addEventListener('click', exitFullscreen);
requestFullscreen
方法必须在用户交互(如点击事件)中调用,以防止恶意网站自动进入全屏模式。requestFullscreen
方法在用户交互事件中调用,并检查浏览器兼容性。exitFullscreen
方法,并检查是否有其他脚本或样式干扰全屏退出。通过遵循上述指南和示例代码,你应该能够在JavaScript中有效地控制页面的全屏模式。
领取专属 10元无门槛券
手把手带您无忧上云