JavaScript全屏功能依赖Fullscreen API，需用户手势触发；调用requestFullscreen()进入、exitFullscreen()退出；通过fullscreenElement判断状态；监听fullscreenchange事件响应变化，并需处理Promise拒绝。
JavaScript 实现全屏功能主要依靠浏览器提供的 Fullscreen API，它允许网页元素（如整个页面、视频、div 等）进入和退出全屏模式。注意：该操作必须由用户手势（如点击、按键）触发，不能自动执行，否则会被浏览器阻止。
如何进入全屏
调用目标元素的 requestFullscreen() 方法即可尝试进入全屏。现代浏览器基本支持，但需注意兼容性前缀（已基本淘汰，但可做兜底）：
推荐写法（标准 + 兼容）：
function launchFullscreen(element) { if (element.requestFullscreen) { element.requestFullscreen(); } else if (element.mozRequestFullScreen) { // Firefox element.mozRequestFullScreen(); } else if (element.webkitRequestFullscreen) { // Chrome, Safari, Opera element.webkitRequestFullscreen(); } else if (element.msRequestFullscreen) { // IE/Edge element.msRequestFullscreen(); }}// 示例：让整个页面全屏launchFullscreen(document.documentElement);// 或让某个 div 全屏// launchFullscreen(document.getElementById('myDiv'));
⚠️ 注意：document.documentElement 表示整个 HTML 文档（即“页面级”全屏），而传入某个 DOM 元素则只让该元素及其子内容占满屏幕（如播放器容器）。
如何退出全屏
调用 document.exitFullscreen() 即可退出当前全屏状态。同样需要兼容写法：
立即学习“Java免费学习笔记（深入）”；
function exitFullscreen() { if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); }}
这个方法不接收参数，且无论哪个元素触发的全屏，都统一通过 document 退出。
如何判断是否处于全屏状态
可通过 document.fullscreenElement 判断：若为 null 表示未全屏；否则返回当前全屏的 DOM 元素。
document.fullscreenElement —— 当前全屏的元素（标准） 兼容属性：document.mozFullScreenElement、document.webkitFullscreenElement、document.msFullscreenElement
常用判断逻辑：
function isFullscreen() { return !!( document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement );}
监听全屏状态变化
全屏进入/退出时会触发事件，可用于更新 UI（如切换按钮图标）：
fullscreenchange：标准事件（推荐监听） 兼容事件：webkitfullscreenchange、mozfullscreenchange、msfullscreenchange
示例：
document.addEventListener('fullscreenchange', () => { if (isFullscreen()) { console.log('已进入全屏'); // 更新按钮文字为“退出全屏” } else { console.log('已退出全屏'); // 更新按钮文字为“进入全屏” }});
注意：事件绑定在 document 上，不是触发元素上。
不复杂但容易忽略：全屏 API 是异步的，可能失败（比如没用户交互、跨 iframe 限制、移动端不支持等），建议配合 catch 处理 Promise 拒绝（现代 requestFullscreen() 返回 Promise）：
element.requestFullscreen() .catch(err => console.error('无法进入全屏:', err));
以上就是Javascript如何实现全屏功能_如何进入和退出全屏？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1544508.html
微信扫一扫 
支付宝扫一扫 
