javascript 全屏状态处理需监听 document 的 fullscreenchange 事件，通过 document.fullscreenelement 是否为 null 判断全屏状态，兼容旧版需监听带前缀事件，requestfullscreen() 和 exitfullscreen() 均返回 promise，应结合事件回调与 fullscreenelement 实时校验状态。

JavaScript 中处理全屏切换状态，核心是监听 fullscreenchange 事件，并通过 document.fullscreenElement 判断当前是否处于全屏状态。

监听全屏状态变化

浏览器在进入或退出全屏时会触发 fullscreenchange 事件，它绑定在 document 上，不是触发元素本身：

• 该事件不冒泡，只能在 document 上监听
• 注意兼容性：旧版浏览器需监听带前缀的事件（如 webkitfullscreenchange、mozfullscreenchange）
• 现代写法建议用 addEventListener，避免重复绑定

判断当前是否全屏

不要依赖事件类型区分“进入”或“退出”，而应检查 document.fullscreenElement：

OpenJDK 24

下载

• 若为 null 或 undefined，表示未全屏
• 若为一个 DOM 元素（如 <div>），表示该元素处于全屏状态 <li>注意：Safari 中可能返回 <code>document.documentElement，但逻辑一致——非 null 即为全屏

主动触发全屏并处理响应

调用 element.requestFullscreen() 后，需捕获 Promise 的成功/失败，并配合 fullscreenchange 做状态同步：

• 成功后会触发 fullscreenchange，此时再读取 fullscreenElement 更可靠
• 失败常见原因：非用户手势触发、iframe 未设置 allow="fullscreen"、页面被嵌入且禁止全屏
• 建议在按钮点击中调用，并统一用 catch 处理拒绝（如提示“请手动允许全屏”）

退出全屏的可控方式

退出全屏不应仅靠用户按 ESC，也应提供显式退出入口：

• 调用 document.exitFullscreen()，同样返回 Promise
• 该方法只在已全屏时生效，否则静默失败，可先判断 document.fullscreenElement
• 退出后仍会触发 fullscreenchange，保持状态监听即可自动更新 UI

不复杂但容易忽略的是：状态判断必须放在事件回调里，不能仅靠 request 调用时机做假设。每次切换都以 fullscreenElement 为准，最稳妥。