Fullscreen API是浏览器提供的原生接口，允许网页元素切换为全屏显示状态，相关的调用函数都挂载在document和Element原型上，通过调用这些函数就能实现全屏模式切换。开发者只需要掌握几个核心方法，就能快速完成全屏功能的开发。
Fullscreen API核心函数说明
实现全屏切换主要用到以下几个核心函数，这些函数都属于Fullscreen API的一部分：
- Element.requestFullscreen()：调用该函数的元素会进入全屏状态，需要在用户交互行为（如点击）中触发，否则浏览器会阻止调用。
- document.exitFullscreen()：退出当前全屏状态，将页面恢复到普通显示模式。
- document.fullscreenElement：返回当前处于全屏状态的元素，如果没有元素全屏则返回null，用于判断当前是否处于全屏状态。
浏览器兼容性处理
部分旧版本浏览器对Fullscreen API的支持需要添加前缀，不同浏览器对应的前缀不同：
| 浏览器类型 | requestFullscreen前缀 | exitFullscreen前缀 |
|---|---|---|
| Chrome、Edge、新版本Firefox | 无 | 无 |
| 旧版本Firefox | mozRequestFullscreen | mozExitFullscreen |
| 旧版本Chrome、Safari | webkitRequestFullscreen | webkitExitFullscreen |
完整全屏切换实现代码示例
下面的代码实现了点击按钮切换全屏状态的功能，同时处理了浏览器前缀兼容问题：
// 获取触发全屏切换的按钮
const toggleBtn = document.getElementById('toggleFullscreen');
// 获取需要全屏显示的目标元素，这里选择整个body
const targetElement = document.body;
// 封装进入全屏的函数，处理不同浏览器的前缀
function enterFullscreen(element) {
// 优先使用标准方法
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.mozRequestFullscreen) { // 旧版本Firefox
element.mozRequestFullscreen();
} else if (element.webkitRequestFullscreen) { // 旧版本Chrome、Safari
element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) { // 旧版本Edge、IE
element.msRequestFullscreen();
}
}
// 封装退出全屏的函数，处理不同浏览器的前缀
function exitFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozExitFullscreen) {
document.mozExitFullscreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
}
// 监听按钮点击事件，切换全屏状态
toggleBtn.addEventListener('click', () => {
// 判断当前是否有元素处于全屏状态
const isFullscreen = document.fullscreenElement
|| document.mozFullScreenElement
|| document.webkitFullscreenElement
|| document.msFullscreenElement;
if (isFullscreen) {
// 当前是全屏状态，退出全屏
exitFullscreen();
} else {
// 当前不是全屏状态，进入全屏
enterFullscreen(targetElement);
}
});
// 监听全屏状态变化事件，更新按钮文字
document.addEventListener('fullscreenchange', updateBtnText);
document.addEventListener('mozfullscreenchange', updateBtnText);
document.addEventListener('webkitfullscreenchange', updateBtnText);
document.addEventListener('msfullscreenchange', updateBtnText);
function updateBtnText() {
const isFullscreen = document.fullscreenElement
|| document.mozFullScreenElement
|| document.webkitFullscreenElement
|| document.msFullscreenElement;
toggleBtn.textContent = isFullscreen ? '退出全屏' : '进入全屏';
}配套HTML结构代码
上面的JavaScript代码需要配合下面的HTML结构才能正常运行：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>全屏切换示例</title>
</head>
<body>
<div class="container">
<h3>Fullscreen API全屏切换示例</h3>
<p>点击下方的按钮可以切换页面的全屏状态</p>
<button id="toggleFullscreen">进入全屏</button>
</div>
<script src="fullscreen.js"></script>
</body>
</html>注意事项
- Fullscreen API的调用必须在用户主动交互的行为中触发，比如点击事件、触摸事件，不能通过定时器或者页面加载完成直接调用，否则浏览器会抛出异常阻止执行。
- 全屏状态下，浏览器的默认UI（如地址栏、工具栏）会被隐藏，只显示全屏的元素内容。
- 可以通过
document.fullscreenEnabled属性判断当前页面是否允许进入全屏模式，部分场景下（如iframe沙箱限制）该属性会返回false。 - 退出全屏的操作也可以通过按下ESC键触发，浏览器会自动处理这个默认行为。
Fullscreen_APIHTML全屏全屏切换document_fullscreen修改时间：2026-06-06 18:05:34