全屏 API 通过 requestFullscreen() 请求元素独占显示并隐藏浏览器 UI，需用户手势触发，配合 fullscreenElement、fullscreenEnabled 属性及 fullscreenchange、fullscreenerror 事件监听状态变化。
JavaScript 中的全屏 API（Fullscreen API）是一组用于控制网页中某个元素以浏览器窗口大小独占显示的接口，它不打开新窗口，也不依赖插件，而是让指定元素（如视频、画布或 div）“撑满整个屏幕”，同时隐藏浏览器 UI（地址栏、工具栏等）。
全屏 API 的核心方法和属性
该 API 主要通过 Element 上的 requestFullscreen() 方法触发，配合 document 上的几个关键属性和事件使用：
element.requestFullscreen()：请求将该元素切换为全屏（需用户手势触发，如 click） document.fullscreenElement：返回当前处于全屏状态的元素，为 null 表示未全屏 document.fullscreenEnabled：布尔值，表示当前文档是否允许进入全屏（例如 iframe 没设 allowfullscreen 就为 false） document.onfullscreenchange：全屏状态切换时触发（进入或退出） document.onfullscreenerror：请求失败时触发（比如没用鼠标点击触发、被策略阻止）
如何让一个元素进入全屏（兼容写法）
由于历史原因，各浏览器曾使用不同前缀（如 webkitRequestFullscreen、msRequestFullscreen），现在主流浏览器已支持无前缀的 requestFullscreen()，但为兼容旧版，可封装一个安全调用函数：
function launchFullscreen(element) { if (element.requestFullscreen) { element.requestFullscreen(); } else if (element.webkitRequestFullscreen) { element.webkitRequestFullscreen(); } else if (element.msRequestFullscreen) { element.msRequestFullscreen(); }}// 使用示例：点击按钮让 id="video" 的 video 元素全屏document.getElementById('fullscreen-btn').addEventListener('click', () => { const video = document.getElementById('video'); launchFullscreen(video);});
注意事项与常见限制
全屏 API 受严格的安全策略约束，不是随时都能调用成功：
立即学习“Java免费学习笔记（深入）”；
必须由用户手势（click、touchend、keydown 等）直接触发，不能在 setTimeout 或异步回调里调用 iframe 需显式添加 allowfullscreen 属性才允许其内容调用全屏（） 某些浏览器（如 Safari）仅允许 退出全屏可用 document.exitFullscreen()（同样有前缀兼容需求）
监听全屏状态变化
推荐用事件监听替代轮询，及时响应进入/退出动作：
document.addEventListener('fullscreenchange', () => { if (document.fullscreenElement) { console.log('已进入全屏，当前元素：', document.fullscreenElement.tagName); } else { console.log('已退出全屏'); }});document.addEventListener('fullscreenerror', (e) => { console.warn('全屏请求失败', e);});
基本上就这些。用好 requestFullscreen 配合状态监听，就能实现干净可控的全屏交互——不复杂但容易忽略用户触发条件和跨浏览器细节。
以上就是javascript中的全屏API是什么_如何让元素进入全屏模式的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1543470.html
微信扫一扫 
支付宝扫一扫 
