HTML5 Fullscreen API可用于控制元素全屏，需先检测document.fullscreenEnabled支持性，通过requestFullscreen()进入全屏，exitFullscreen()退出，并监听fullscreenchange事件获取状态变化，注意兼容前缀及用户手势触发限制。
HTML5 提供了 Fullscreen API，允许开发者将页面中的某个元素或整个页面切换到全屏模式，提升用户体验。这个功能常用于视频播放、游戏、演示文稿等场景。下面介绍如何使用 Fullscreen API 实现全屏的进入与退出控制。
检测全屏支持与状态
在调用全屏方法前，建议先检查当前浏览器是否支持 Fullscreen API，并获取当前全屏状态。
注意：由于浏览器兼容性问题，Fullscreen API 存在多个带前缀的版本，需做兼容处理。
可以通过以下方式判断支持情况：
立即学习“前端免费学习笔记（深入）”；
document.fullscreenEnabled：表示浏览器是否支持全屏模式。document.fullscreenElement：返回当前处于全屏状态的元素，若无则返回 null。
进入全屏模式
要让某个元素进入全屏，调用其 requestFullscreen() 方法即可。
示例：点击按钮使页面主体进入全屏
const elem = document.documentElement; // 获取页面根元素function openFullscreen() {if (elem.requestFullscreen) {elem.requestFullscreen();} else if (elem.webkitRequestFullscreen) { / Safari /elem.webkitRequestFullscreen();} else if (elem.msRequestFullscreen) { / IE11 /elem.msRequestFullscreen();}}
你可以将该函数绑定到按钮的点击事件上。
退出全屏模式
使用 exitFullscreen() 方法可退出全屏状态。
function closeFullscreen() { if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); }}
此方法无需指定元素，直接通过 document 调用即可。
监听全屏状态变化
可通过监听 fullscreenchange 事件来响应全屏状态的切换。
document.addEventListener('fullscreenchange', () => { if (document.fullscreenElement) { console.log('已进入全屏'); } else { console.log('已退出全屏'); }});
同样，为了兼容性，可能需要监听 webkitfullscreenchange 或 msfullscreenchange 等前缀事件。
基本上就这些。掌握这几个核心方法和事件，就能实现稳定的全屏切换控制。注意权限限制：部分浏览器要求用户手势（如点击）才能触发全屏，不能由脚本自动执行。
以上就是html5使用fullscreen API实现全屏显示 html5使用全屏模式的切换控制的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1591557.html
微信扫一扫 
支付宝扫一扫 
