如何用javascript操作全屏api_javascript怎样控制显示模式_技术教程

全屏API的核心方法是requestFullscreen()；它返回Promise需显式处理，旧版浏览器有带前缀的变体；iOS Safari完全不支持，Android WebView需特定配置否则静默失败。

全屏 API 的核心方法是 `requestFullscreen()`，不是 `fullscreen()` 或 `launchFullscreen()`

浏览器不支持统一命名的“全屏函数”，必须调用 DOM 元素上的 requestFullscreen() 方法。这个方法返回 Promise，在现代浏览器中需显式处理；旧版 Chrome/ Safari 曾用 webkitRequestFullscreen()，Firefox 用过 mozRequestFullScreen() —— 现在已基本废弃，但若需兼容较老版本（如 Chrome

常见错误是直接调用 document.requestFullscreen() 而没检查元素上下文：该方法只能由**用户手势触发**（如 click、keydown），且必须作用于一个可渲染的 DOM 元素（、、等），不能直接对 document 或 window 调用（除非是 document.documentElement，但也不推荐）。



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（极少见，多因嵌套权限混乱）。
立即学习“Java免费学习笔记（深入）”；

监听状态变化应使用 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)，也可能静默失败。