HTML5全屏API可通过JavaScript直接调用，需先检测浏览器支持情况，使用requestFullscreen及带前缀方法让元素全屏，调用exitFullscreen退出，并监听fullscreenchange事件获取状态变化，注意兼容性和用户交互触发限制。
HTML5全屏API（Fullscreen API）允许开发者让网页中的某个元素进入全屏模式，提升用户体验，常用于视频播放、游戏或演示页面。使用这个API不需要引入额外库，直接通过JavaScript调用即可。
1. 判断浏览器是否支持全屏API
在调用全屏功能前，最好先检测当前浏览器是否支持。可通过检查元素是否存在requestFullscreen方法来判断：
-
element.requestFullscreen()是标准方法 - 部分浏览器仍需使用前缀，如：
webkitRequestFullscreen（Chrome, Safari）、mozRequestFullScreen（Firefox）
示例代码：
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
} else {
alert("当前浏览器不支持全屏API");
}
2. 让元素进入全屏模式
选择一个DOM元素（如div、video等），调用其全屏请求方法即可进入全屏。
立即学习“前端免费学习笔记（深入）”；
HTML结构示例：
这是一个可以全屏的区域
JavaScript实现：
function openFullscreen() {
const elem = document.getElementById("content");
if (elem) {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
}
}
}
3. 退出全屏模式
可以通过document.exitFullscreen()退出全屏状态。
添加退出按钮：
JavaScript代码：
function exitFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
}
4. 监听全屏状态变化
可以监听fullscreenchange事件，判断当前是否处于全屏状态。
document.addEventListener("fullscreenchange", () => {
if (document.fullscreenElement) {
console.log("已进入全屏");
} else {
console.log("已退出全屏");
}
});
注意：带前缀的事件名也需兼容，例如webkitfullscreenchange、mozfullscreenchange。
完整监听示例：
document.addEventListener("fullscreenchange", handleScreenChange);
document.addEventListener("webkitfullscreenchange", handleScreenChange);
document.addEventListener("mozfullscreenchange", handleScreenChange);
document.addEventListener("msfullscreenchange", handleScreenChange);
function handleScreenChange() {
const isFullscreen = document.fullscreenElement ||
document.webkitFullscreenElement ||
document.mozFullScreenElement ||
document.msFullscreenElement;
console.log(isFullscreen ? "全屏中" : "非全屏");
}
基本上就这些。只要注意浏览器兼容性和用户交互触发限制（全屏操作必须由用户手势如点击触发），就能顺利实现全屏功能。不复杂但容易忽略细节。
