本文介绍使用现代 Web API（document.fullscreenElement 和 fullscreenchange 事件）精准检测浏览器全屏状态，并自动同步 RufflePlayer 的全屏行为，替代已废弃的 window.fullScreen 等旧方法。
本文介绍使用现代 web api（`document.fullscreenelement` 和 `fullscreenchange` 事件）精准检测浏览器全屏状态，并自动同步 ruffleplayer 的全屏行为，替代已废弃的 `window.fullscreen` 等旧方法。
在 Web 开发中，为提升 Flash 内容兼容性，Ruffle 作为开源 Flash 模拟器被广泛集成。当用户通过 F11 或 requestFullscreen() 进入浏览器全屏模式时，常需让嵌入的 Ruffle 播放器同步进入全屏以保持体验一致性；退出时亦需及时还原。但直接依赖 window.fullScreen 或宽高比判断（如 window.innerWidth === screen.width）不仅不可靠，而且已被主流浏览器弃用——该属性自 Chrome 71、Firefox 69 起彻底移除，且无法响应由 JavaScript 主动触发的全屏（如 element.requestFullscreen()），导致逻辑失效。
✅ 推荐方案：使用标准全屏 API
现代浏览器统一支持基于 document.fullscreenElement 的状态检测和 fullscreenchange 事件监听：
function handleFullscreenChange() {
if (document.fullscreenElement) {
// 浏览器处于全屏状态 → 同步启用 Ruffle 全屏
if (window.RufflePlayer && typeof window.RufflePlayer.enterFullscreen === 'function') {
window.RufflePlayer.enterFullscreen();
}
} else {
// 退出全屏 → 同步退出 Ruffle 全屏
if (window.RufflePlayer && typeof window.RufflePlayer.exitFullscreen === 'function') {
window.RufflePlayer.exitFullscreen();
}
}
}
// 绑定全局全屏状态变更监听器
document.addEventListener('fullscreenchange', handleFullscreenChange);
// 注意：也建议监听 'webkitfullscreenchange' 和 'mozfullscreenchange' 以兼顾旧版 Safari/Firefox（可选）⚠️ 注意事项：
-
确保 Ruffle 已加载完成：该逻辑必须在
window.RufflePlayer可用后执行（例如置于RufflePlayer.load()成功回调中，或使用DOMContentLoaded+ 延迟检查）。 -
避免重复绑定：若页面动态重载或多次初始化 Ruffle，需防止重复添加事件监听器（可用
removeEventListener清理，或使用{ once: true }配合初始化逻辑）。 -
权限与上下文限制：
enterFullscreen()仅在用户手势（如点击）触发的上下文中有效；若由fullscreenchange自动调用，部分浏览器可能因安全策略静默失败——建议结合 UI 按钮提供手动同步入口作为兜底。 -
跨浏览器兼容性：虽然
fullscreenchange是标准事件，但早期 Safari 使用webkitfullscreenchange，Firefox 曾用mozfullscreenchange。生产环境建议按需补充兼容监听（现代项目通常无需，除非需支持 Firefox
? 总结：摒弃过时的 window.fullScreen 和尺寸硬匹配逻辑，采用 document.fullscreenElement 判断状态 + fullscreenchange 事件驱动响应，是健壮、标准且面向未来的实现方式。配合适当的加载时序控制与错误防护，即可实现 Ruffle 播放器与浏览器全屏状态的无缝同步。
