17370845950

JavaScript 全屏切换依赖 Fullscreen API，需用户手势触发 requestFullscreen() 进入、exitFullscreen() 退出，并监听 fullscreenchange 事件响应状态变化，配合 :fullscreen 伪类定制样式。

JavaScript 实现全屏切换主要依靠 Fullscreen API，它是一套原生、轻量、无需第三方库的浏览器标准接口，用于让指定元素（如视频容器、画布或整个页面）进入/退出全屏模式。

如何请求全屏（进入全屏）

调用目标元素的 requestFullscreen() 方法即可尝试进入全屏。注意：该操作必须由用户手势（如点击、键盘事件）触发，否则会被浏览器拒绝。

• 现代写法（推荐）：element.requestFullscreen()
• 兼容旧版需加前缀（如 Chrome/Safari 早期）：element.webkitRequestFullscreen()、element.mozRequestFullScreen()、element.msRequestFullscreen()
• 常见错误：直接在页面加载时调用会失败；应绑定在按钮点击等交互事件中

如何退出全屏（退出全屏）

调用 document.exitFullscreen() 即可退出当前全屏状态。同样需由用户操作触发，且仅当页面处于全屏时才有效。

• 可配合 document.fullscreenElement 判断是否已在全屏：if (document.fullscreenElement) { document.exitFullscreen(); }
• 旧版兼容写法：document.webkitExitFullscreen()、document.mozCancelFullScreen()、document.msExitFullscreen()

监听全屏状态变化

使用 fullscreenchange 事件可实时响应全屏切换，适用于更新 UI（如切换“全屏”/“退出全屏”按钮图标）。

• document.addEventListener('fullscreenchange', () => { ... })
• 在回调中通过 document.fullscreenElement 获取当前全屏的 DOM 元素（为 null 表示未全屏）
• 注意：该事件不带详细信息参数，需主动查询状态

样式与注意事项

全屏状态下，浏览器会自动为全屏元素添加伪类 :fullscreen，可用于定制全屏样式（如隐藏滚动条、调整背景）。

• CSS 示例：div:fullscreen { width: 100vw; height: 100vh; background: black; }
• 部分浏览器（如 Safari）对 iframe 内容启用全屏有限制，需设置 allow="fullscreen"
• 移动端支持有限，iOS Safari 不支持非 video 元素的全屏（video 元素可通过 webkit-playsinline 和 controls 触发）