如何实现 Chrome 浏览器中的 JavaScript 全屏功能？

在 Chrome 浏览器中，通过 JavaScript 实现全屏显示是一个常见需求，比如用于视频播放、游戏或演示等场景，本文将详细介绍如何使用 JavaScript 来实现这一功能。

h3 一、基本概念

全屏 API 允许网页应用请求浏览器进入全屏模式，隐藏所有 UI 元素（如工具栏、地址栏等），使页面内容占据整个屏幕。

h3 二、使用 Fullscreen API

1、requestFullscreen()：该方法用于请求当前元素进入全屏模式。

2、exitFullscreen()：该方法用于退出全屏模式。

h3 三、示例代码

// 获取要全屏显示的元素
var element = document.getElementById("fullscreenElement");
// 请求全屏
element.requestFullscreen().then(function() {
    console.log("进入全屏模式");
}).catch(function(error) {
    console.error("无法进入全屏模式:", error);
});
// 退出全屏
document.exitFullscreen().then(function() {
    console.log("退出全屏模式");
}).catch(function(error) {
    console.error("无法退出全屏模式:", error);
});

h3 四、注意事项

1、只有用户主动操作（如点击按钮）才能触发全屏请求，这是为了防止恶意网站滥用全屏功能。

2、不同浏览器对全屏 API 的支持可能有所不同，需要进行兼容性处理。

h3 五、兼容性处理

为了确保在各种浏览器上都能正常工作，可以使用以下代码进行兼容性处理：

function requestFullScreen(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 and Opera */
        document.webkitExitFullscreen();
    } else if (document.msExitFullscreen) { /* IE/Edge */
        document.msExitFullscreen();
    }
}

h3 六、应用场景

1、视频播放：当用户点击播放按钮时，使视频全屏显示，提供更好的观看体验。

2、游戏：让游戏全屏运行，增加沉浸感。