如何实现浏览器与RufflePlayer的全屏状态同步？求优化方案

你之前的方案存在两个核心问题：

1. 判断逻辑不可靠：window.fullScreen是非标准属性，不同浏览器支持不一致；通过宽高判断全屏也不准确——比如浏览器最大化时，窗口尺寸可能和屏幕尺寸完全一致，但这并不是真正的全屏状态。
2. 没有监听状态变化：你的代码只是单次判断，无法捕获浏览器通过F11或其他方式触发的全屏/退出全屏的动态变化。

下面是更可靠的实现方案，利用标准的全屏API事件来同步状态：

核心思路 #

监听文档的全屏状态变化事件，通过标准属性判断当前是否处于全屏状态，再调用RufflePlayer的全屏方法。同时兼容不同浏览器的前缀。

完整代码示例 #

// 绑定全屏状态变化事件（兼容各浏览器前缀）
document.addEventListener('fullscreenchange', syncRuffleFullscreen);
document.addEventListener('webkitfullscreenchange', syncRuffleFullscreen);
document.addEventListener('mozfullscreenchange', syncRuffleFullscreen);
document.addEventListener('msfullscreenchange', syncRuffleFullscreen);

// 确保RufflePlayer初始化完成后再执行
document.addEventListener('DOMContentLoaded', () => {
  // 如果Ruffle是同步加载的
  if (window.RufflePlayer) {
    initFullscreenSync();
  } else {
    // 如果Ruffle是异步加载的，监听加载完成事件
    window.addEventListener('ruffle-ready', initFullscreenSync);
  }
});

function initFullscreenSync() {
  // 初始状态同步（可选，确保页面加载时状态一致）
  const isFullscreen = document.fullscreenElement || 
                       document.webkitFullscreenElement || 
                       document.mozFullScreenElement || 
                       document.msFullscreenElement;
  isFullscreen ? window.RufflePlayer.enterFullscreen() : window.RufflePlayer.exitFullscreen();
}

function syncRuffleFullscreen() {
  const isFullscreen = document.fullscreenElement || 
                       document.webkitFullscreenElement || 
                       document.mozFullScreenElement || 
                       document.msFullscreenElement;
  
  if (isFullscreen) {
    window.RufflePlayer.enterFullscreen();
  } else {
    window.RufflePlayer.exitFullscreen();
  }
}

关键说明 #

• 使用标准全屏API：document.fullscreenElement（及对应前缀属性）是判断全屏状态的可靠依据——当处于全屏时，该属性会返回当前全屏的元素，否则返回null。
• 监听状态变化事件：fullscreenchange事件会在全屏状态切换时触发，确保能实时同步RufflePlayer的状态。
• 等待Ruffle初始化：必须确保window.RufflePlayer已经存在再调用其方法，避免报错。如果Ruffle是异步加载的，通过ruffle-ready事件监听加载完成。

内容的提问来源于stack exchange，提问作者unkane