html5全屏API可通过调用元素的requestFullscreen方法实现全屏，需兼容不同浏览器前缀，并由用户操作触发，配合exitFullscreen退出及fullscreenchange监听状态。
html5 提供了全屏 API（Fullscreen API），可以让网页中的元素（如视频、图片、游戏画布等）进入全屏模式，提升用户体验。这个功能在视频播放器、在线游戏和演示页面中非常实用。下面详细介绍如何使用 HTML5 全屏 API 实现全屏功能。
检测浏览器支持情况
由于不同浏览器对全屏 API 的实现略有差异，使用前应先检测是否支持。可以通过检查 dom 元素上是否存在 requestFullscreen 方法来判断：
- 现代标准方法：
element.requestFullscreen() - chrome 和旧版 safari：
element.webkitRequestFullscreen() - firefox：
element.mozRequestFullScreen() - IE/edge 旧版本：
element.msRequestFullscreen()
示例代码：
if (element.requestFullscreen) { element.requestFullscreen(); } else if (element.webkitRequestFullscreen) { element.webkitRequestFullscreen(); } else if (element.mozRequestFullScreen) { element.mozRequestFullScreen(); } else if (element.msRequestFullscreen) { element.msRequestFullscreen(); }
让元素进入全屏模式
调用目标元素的请求全屏方法即可进入全屏。比如让一个 div 或 video 元素全屏显示：
立即学习“前端免费学习笔记（深入）”；
const elem = document.getElementById('myVideo'); <p>function openFullscreen() { if (elem.requestFullscreen) { elem.requestFullscreen(); } else if (elem.webkitRequestFullscreen) { /<em> Safari </em>/ elem.webkitRequestFullscreen(); } else if (elem.mozRequestFullScreen) { /<em> Firefox </em>/ elem.mozRequestFullScreen(); } else if (elem.msRequestFullscreen) { /<em> IE11 </em>/ elem.msRequestFullscreen(); } }
然后通过按钮触发：
<button onclick="openFullscreen()">进入全屏</button>
退出全屏模式
可以使用 document.exitFullscreen() 方法退出全屏状态：
function closeFullscreen() { if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); } }
添加退出按钮：
<button onclick="closeFullscreen()">退出全屏</button>
监听全屏状态变化
通过监听 fullscreenchange 事件，可以知道当前是否处于全屏状态：
document.addEventListener('fullscreenchange', function () { if (document.fullscreenElement) { console.log('已进入全屏'); } else { console.log('已退出全屏'); } });
注意：各浏览器前缀不同，需兼容：
-
fullscreenchange（标准） -
webkitfullscreenchange（Chrome/Safari） -
mozfullscreenchange（Firefox） -
MSFullscreenChange（IE）
注意事项与限制
全屏 API 使用有一些安全和体验上的限制：
- 必须由用户操作（如点击）触发，不能自动执行
- 某些浏览器会显示全屏提示栏，用户可手动退出
- 不支持跨 iframe 嵌套调用（除非设置允许）
- 移动端支持有限，部分浏览器不支持或行为不同
基本上就这些。掌握 Fullscreen API 后，你可以为视频播放、ppt 展示或小游戏添加沉浸式体验。虽然有浏览器兼容问题，但通过加前缀和判断基本可以覆盖主流环境。不复杂但容易忽略细节。