在网页开发中，实现全屏功能可以提升用户的沉浸式体验，比如视频播放、游戏页面、数据可视化大屏等场景都需要用到全屏能力。js实现全屏功能主要依赖浏览器提供的Fullscreen API，通过调用对应的方法即可控制页面或指定元素进入、退出全屏状态。
全屏API核心方法
Fullscreen API提供了几个核心方法，用于操作全屏状态，不同浏览器可能需要添加对应的前缀才能正常调用。
进入全屏
要让指定元素进入全屏，需要调用该元素的全屏请求方法，不同浏览器的前缀对应关系如下：
| 标准方法 | Chrome/Safari前缀 | Firefox前缀 | IE前缀 |
|---|---|---|---|
| requestFullscreen() | webkitRequestFullscreen() | mozRequestFullScreen() | msRequestFullscreen() |
退出全屏
退出全屏需要调用document对象的退出全屏方法，同样需要兼容不同浏览器的前缀：
| 标准方法 | Chrome/Safari前缀 | Firefox前缀 | IE前缀 |
|---|---|---|---|
| exitFullscreen() | webkitExitFullscreen() | mozCancelFullScreen() | msExitFullscreen() |
获取全屏元素
可以通过document.fullscreenElement属性判断当前是否有元素处于全屏状态，该属性返回当前全屏的元素，若没有则返回null，同样需要兼容前缀：
- 标准属性：fullscreenElement
- Chrome/Safari前缀：webkitFullscreenElement
- Firefox前缀：mozFullScreenElement
- IE前缀：msFullscreenElement
js实现全屏功能的完整示例
下面是一个完整的示例，包含进入全屏、退出全屏、监听全屏状态变化的功能实现：
// 获取需要操作的元素
const fullscreenBtn = document.getElementById('fullscreenBtn');
const exitFullscreenBtn = document.getElementById('exitFullscreenBtn');
const targetElement = document.getElementById('targetElement');
// 兼容不同浏览器的进入全屏方法
function requestFullscreen(element) {
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
} else {
alert('当前浏览器不支持全屏功能');
}
}
// 兼容不同浏览器的退出全屏方法
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();
}
}
// 兼容不同浏览器的获取全屏元素方法
function getFullscreenElement() {
return document.fullscreenElement
|| document.webkitFullscreenElement
|| document.mozFullScreenElement
|| document.msFullscreenElement
|| null;
}
// 进入全屏按钮点击事件
fullscreenBtn.addEventListener('click', () => {
requestFullscreen(targetElement);
});
// 退出全屏按钮点击事件
exitFullscreenBtn.addEventListener('click', () => {
exitFullscreen();
});
// 监听全屏状态变化事件
document.addEventListener('fullscreenchange', handleFullscreenChange);
document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
document.addEventListener('mozfullscreenchange', handleFullscreenChange);
document.addEventListener('MSFullscreenChange', handleFullscreenChange);
function handleFullscreenChange() {
const isFullscreen = getFullscreenElement() !== null;
if (isFullscreen) {
console.log('当前处于全屏状态');
} else {
console.log('当前已退出全屏状态');
}
}
常见问题与注意事项
在使用js实现全屏功能时，需要注意以下几个常见问题：
- 全屏请求必须由用户主动触发，比如点击事件、触摸事件等，不能在页面加载完成后自动调用，否则浏览器会阻止该操作。
- 全屏状态下，浏览器的默认快捷键（比如F11）仍然可以生效，部分浏览器会隐藏地址栏和工具栏。
- 如果进入全屏的元素包含子元素，子元素会跟随父元素一起进入全屏，不需要单独处理子元素的全屏状态。
- 部分旧版本浏览器可能完全不支持Fullscreen API，需要在调用前做好兼容性判断，避免代码报错。
注意：全屏API的调用需要页面处于安全上下文环境，比如使用https协议访问，或者本地localhost、127.0.0.1、192.168.0.1等地址访问，否则部分浏览器会限制全屏功能的正常使用。
js全屏功能Fullscreen_APIdocument_fullscreenscreen_fullscreen修改时间：2026-06-28 20:12:27