js 控制页面全屏

在JavaScript中控制页面全屏主要涉及到requestFullscreen和exitFullscreen这两个方法，以及一些浏览器前缀以确保兼容性。

基础概念

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