JavaScript实现全屏显示方法详解

• document.body.requestFullscreen() 可行，但部分浏览器会拒绝非内容区域的全屏请求
• 更稳妥的做法是包裹一个
  ，然后调用 document.getElementById('app').requestFullscreen()
• 若调用后 Promise 拒绝，catch 中通常得到 TypeError: Document not active 或 SecurityError，说明触发条件不满足

判断是否处于全屏状态，用 document.fullscreenElement，不是 isFullscreen 或 fullscreenEnabled

document.fullscreenElement 是当前处于全屏模式的 DOM 元素（null 表示未全屏），这是唯一可靠的状态判断依据。注意拼写是 fullscreen（无连字符），且大小写敏感 —— document.fullScreenElement（带大写 S）是旧 IE 的遗留写法，已无效。

document.fullscreenEnabled 仅表示“当前文档是否允许进入全屏”，它不反映实际状态，比如页面被 iframe 嵌入且 sandbox 属性禁用了全屏，该值就是 false，但你仍可能看到 fullscreenElement 非 null（极少见，多因嵌套权限混乱）。

• 监听状态变化应使用 document.addEventListener('fullscreenchange', handler)，而不是轮询
• 退出全屏统一用 document.exitFullscreen()（同样返回 Promise）
• 不要依赖 screen.orientation 判断全屏，它只管设备方向，和全屏 API 无关

全屏样式适配靠 :fullscreen 伪类，不是 .fullscreen 类名或 full-screen 属性

CSS 中启用全屏专属样式，必须用标准伪类 :fullscreen（无连字符，小写）。它会匹配当前 fullscreenElement 及其所有后代。浏览器前缀版本如 :-webkit-full-screen、:-moz-full-screen 已逐步淘汰，现代项目只需写一次标准形式。

注意：该伪类不触发重排，但会覆盖原有样式，比如你设了 body { margin: 0 }，在全屏下可能失效，需显式写 body:fullscreen { margin: 0 }。另外，:fullscreen 不支持在 Shadow DOM 内部生效（除非开启 delegatesFocus 并透出样式）。

• 避免用 !important 强制覆盖，优先提高 CSS 选择器权重
• 视频全屏时， 自带浏览器控件样式，:fullscreen 只影响自定义 UI 层
• 移动端 Safari 对 :fullscreen 支持有限，部分样式可能被忽略

退出全屏失败？检查 document.exitFullscreen() 的 Promise 和触发时机

document.exitFullscreen() 返回 Promise，但它的 resolve 并不保证界面已退出 —— 它只是表示退出请求已发出。真正完成以 fullscreenchange 事件为准。常见失败场景包括：

• 调用时页面不在全屏状态（Promise resolve，但无实际效果）
• 页面被其他脚本或插件抢占了全屏控制权（如视频播放器自己管理全屏）
• 在非主线程（如 Web Worker）中调用，直接抛 DOMException
• 从 iframe 内调用，且父页面未设置 allow="fullscreen" 属性

button.addEventListener('click', () => {
  if (document.fullscreenElement) {
    document.exitFullscreen()
      .catch(err => console.warn('Exit failed:', err));
  } else {
    appDiv.requestFullscreen()
      .catch(err => console.warn('Enter failed:', err));
  }
});

最易被忽略的是：全屏 API 在 iOS Safari 上完全不可用（仅支持原生视频全屏按钮），且 Android WebView 若未配置 WebSettings.setJavaScriptEnabled(true) 和 setMediaPlaybackRequiresUserGesture(false)，也可能静默失败。

以上就是《JavaScript实现全屏显示方法详解》的详细内容，更多关于的资料请关注golang学习网公众号！