17370845950

JavaScript全屏功能依赖Fullscreen API，须由用户手势触发；调用element.requestFullscreen()进入全屏，document.exitFullscreen()退出；通过document.fullscreenElement检测状态，并监听fullscreenchange事件响应变化。

JavaScript 实现全屏功能主要依靠浏览器提供的 Fullscreen API，它允许网页元素（如视频、画布或整个 body）进入和退出全屏模式。注意：该操作必须由用户手势（如点击、按键）触发，不能自动执行，否则会被浏览器拒绝。

如何进入全屏

调用目标元素的 requestFullscreen() 方法即可尝试进入全屏。现代浏览器基本支持，但需注意兼容性前缀（旧版 Chrome/Safari 用 webkitRequestFullscreen，Firefox 早期用 mozRequestFullScreen）。

• 推荐写法：使用 Element.requestFullscreen()（标准方法），并做简单错误处理
• 只能对 document 中已挂载的元素调用，且该元素需满足“可全屏”条件（例如不是 iframe 内嵌页，除非设置了 allowfullscreen）
• 常见目标：常用 document.documentElement（即 html> 元素）来让整个页面进入全屏

示例代码：

function enterFullscreen() {
  const elem = document.documentElement;
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) {
    elem.webkitRequestFullscreen();
  } else if (elem.mozRequestFullScreen) {
    elem.mozRequestFullScreen();
  } else if (elem.msRequestFullscreen) {
    elem.msRequestFullscreen();
  }
}

// 绑定到按钮点击
document.getElementById('fs-btn').addEventListener('click', enterFullscreen);

如何检测是否处于全屏状态

通过 document.fullscreenElement 判断：若为非 null，表示当前有元素处于全屏；值为实际全屏的 DOM 元素。

• document.fullscreenElement === null 表示未全屏
• 也可监听 fullscreenchange 事件，响应式更新 UI（如切换“退出全屏”按钮文字）
• 注意：该属性名在部分旧浏览器中带前缀，如 webkitIsFullScreen、mozFullScreenElement，但现代开发中优先使用标准属性

如何退出全屏

调用 document.exitFullscreen() 即可退出当前全屏状态。同样需兼容旧版本：

• 标准方法：document.exitFullscreen()
• 旧版 Chrome/Safari：document.webkitExitFullscreen()
• 旧版 Firefox：document.mozCancelFullScreen()
• 旧版 IE/Edge：document.msExitFullscreen()

示例：

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();
  }
}

注意事项与最佳实践

全屏 API 受安全策略限制较多，实际使用中需留意：

• 必须由用户主动触发（如 click、touchend），脚本直接调用会抛出 TypeError
• 移动端支持有限：iOS Safari 不支持除
• 全屏时页面缩放、滚动、焦点行为可能变化，建议配合 fullscreenchange 更新样式或逻辑
• 退出全屏后，document.fullscreenElement 变为 null，可借此清理状态