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 ? "全屏中" : "非全屏");}
基本上就这些。只要注意浏览器兼容性和用户交互触发限制（全屏操作必须由用户手势如点击触发），就能顺利实现全屏功能。不复杂但容易忽略细节。
以上就是HTML5全屏API怎么用_HTML5FullscreenAPI实现全屏显示的方法与实例的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1597789.html
微信扫一扫 
支付宝扫一扫 
