html5的fullscreen API是浏览器提供的一组用于控制页面全屏显示的接口，开发者可以通过调用相关方法让指定元素或整个文档进入全屏状态，也可以退出全屏，还能监听全屏状态的变化。这个API在视频播放、游戏页面、数据大屏展示等场景中应用非常广泛。
fullscreen API核心方法与属性
要实现全屏相关的控制，首先需要了解API提供的核心方法和属性，以下是常用的几个：
Element.requestFullscreen()：让指定元素进入全屏模式，是异步方法，返回Promise对象document.exitFullscreen()：让当前全屏的元素退出全屏模式，同样是异步方法document.fullscreenElement：返回当前处于全屏状态的元素，如果没有元素全屏则返回nulldocument.fullscreenEnabled：返回一个布尔值，表示当前文档是否允许进入全屏模式
实现基础全屏显示功能
首先我们需要准备一个触发全屏的按钮，以及需要全屏显示的目标元素，以下是一个简单的示例代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>全屏示例</title>
<style>
#fullscreenTarget {
width: 500px;
height: 300px;
background-color: #f0f0f0;
border: 1px solid #ccc;
margin: 20px auto;
text-align: center;
line-height: 300px;
}
.btn {
padding: 10px 20px;
background-color: #409eff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
margin: 0 10px;
}
</style>
</head>
<body>
<div id="fullscreenTarget">
这是需要全屏显示的内容区域
</div>
<div style="text-align: center;">
<button class="btn" id="enterFullscreenBtn">进入全屏</button>
</div>
<script>
// 获取目标元素和按钮
const target = document.getElementById('fullscreenTarget');
const enterBtn = document.getElementById('enterFullscreenBtn');
// 点击按钮进入全屏
enterBtn.addEventListener('click', () => {
// 先检查是否允许全屏
if (!document.fullscreenEnabled) {
alert('当前浏览器不支持全屏功能');
return;
}
// 调用requestFullscreen方法让目标元素进入全屏
target.requestFullscreen().then(() => {
console.log('已进入全屏模式');
}).catch(err => {
console.error('进入全屏失败:', err);
});
});
</script>
</body>
</html>
实现全屏切换控制
实际开发中我们经常需要切换全屏状态，也就是如果当前元素已经全屏就退出全屏，否则进入全屏，这时候可以通过document.fullscreenElement来判断当前是否有元素处于全屏状态：
// 获取切换全屏的按钮
const toggleBtn = document.getElementById('toggleFullscreenBtn');
toggleBtn.addEventListener('click', () => {
// 判断当前是否有元素全屏
if (document.fullscreenElement) {
// 有元素全屏，调用exitFullscreen退出全屏
document.exitFullscreen().then(() => {
console.log('已退出全屏模式');
}).catch(err => {
console.error('退出全屏失败:', err);
});
} else {
// 没有元素全屏，让目标元素进入全屏
target.requestFullscreen().then(() => {
console.log('已进入全屏模式');
}).catch(err => {
console.error('进入全屏失败:', err);
});
}
});
监听全屏状态变化
有时候我们需要在页面全屏状态变化时执行一些操作，比如修改按钮文字、调整元素样式等，这时候可以监听fullscreenchange事件：
// 监听全屏状态变化事件
document.addEventListener('fullscreenchange', () => {
if (document.fullscreenElement) {
console.log('全屏状态：已全屏');
toggleBtn.textContent = '退出全屏';
} else {
console.log('全屏状态：未全屏');
toggleBtn.textContent = '进入全屏';
}
});
浏览器兼容处理
不同浏览器对fullscreen API的实现存在前缀差异，比如旧版WebKit内核浏览器使用webkitRequestFullscreen，旧版Firefox浏览器使用mozRequestFullScreen，为了兼容更多浏览器，我们可以封装一个兼容性的全屏切换方法：
// 封装兼容性全屏切换方法
function toggleFullscreen(element) {
// 如果当前有元素全屏，退出全屏
if (document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement) {
// 退出全屏的兼容处理
const exitFullscreen = document.exitFullscreen || document.webkitExitFullscreen || document.mozCancelFullScreen;
if (exitFullscreen) {
exitFullscreen.call(document);
}
} else {
// 进入全屏的兼容处理
const requestFullscreen = element.requestFullscreen || element.webkitRequestFullscreen || element.mozRequestFullScreen;
if (requestFullscreen) {
requestFullscreen.call(element);
} else {
alert('当前浏览器不支持全屏功能');
}
}
}
// 使用封装的方法
toggleBtn.addEventListener('click', () => {
toggleFullscreen(target);
});
注意事项
- 全屏API只能在用户主动操作（比如点击、按键）中触发，不能通过代码自动触发，否则会被浏览器拦截
- 进入全屏后，浏览器的默认行为可能会被限制，比如按ESC键会退出全屏
- 全屏状态下，部分浏览器的地址栏、工具栏会被隐藏，只显示全屏的内容区域
- 如果需要在全屏中显示自定义的控制按钮，需要将按钮放在全屏的目标元素内部
Fullscreen_APIhtml5全屏全屏切换screen_fullscreen修改时间：2026-06-30 18:00:19