Polyfill 自动替换：Ruffle 怎么接管你页面上的旧 Flash 标签

什么是 polyfill 模式

你只放了一行 <script src="ruffle.js"></script>，没写任何 JS 代码调用 Ruffle——Ruffle 自己扫描 DOM、自己替换、自己开始播放。这种「脚本加载后自动接管页面」的行为就是 polyfill 模式。

它扫描哪些东西

原生 Flash 标签

• <object> 带 classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
• <embed> 带 type="application/x-shockwave-flash"
• 同时匹配 <param name="movie" value="..."> 里定义的 SWF 地址

流行的 SWF 嵌入库生成的标签

• SWFObject（最常见，几乎所有老 Flash 站都用过）
• SWFAction
• AC_RunActiveContent.js（Adobe 官方那个）

这些库生成的 HTML 结构比较规整，Ruffle 对它们有专门的识别逻辑。

iframe 里的 Flash

如果 Flash 内容嵌在一个 <iframe> 里、iframe 的 src 直接指向 .swf——Ruffle 也能识别并替换。但如果 iframe 指向的是另一个 HTML 页面、那个页面里才嵌了 Flash——Ruffle 默认扫不到 iframe 内部，需要跨源 iframe 的话得在 iframe 页面里也引入 Ruffle 脚本。

替换过程

1. Ruffle 找到一个 Flash 元素
2. 读它的宽高、SWF URL、wmode 参数（透明 / 窗口 / 不透明）
3. 从 DOM 里移除原始元素
4. 插入自己的 <div id="ruffle-player-xxx">，把原始宽高和 wmode 带过去
5. 异步加载 WASM 运行时 → 把 SWF 喂进去 → 开始播放

原始元素不会被恢复（浏览器扩展也一样），所以如果你的页面有依赖原始 Flash Player 的 JavaScript 代码（比如 document.getElementById('flash-id').GetVariable()），那段代码会失效。你需要用 Ruffle 的 JS API 来访问播放器实例。

Polyfill 失效的常见原因

Flash 标签动态生成太晚

比如：页面加载完成后 3 秒，用户点了某个按钮 → JavaScript 用 document.write() 或 innerHTML += 动态塞进一个 Flash 标签。Ruffle 可能在动态插入之前就扫完 DOM 了——这个新元素不会被接管。

解决办法：动态插入之后手动触发一次扫描：

window.RufflePlayer.polyfill();

Flash 标签写法绕

极少数 Flash 站会用非常古怪的写法生成标签（比如 obfuscate 了 classid、或把 URL 拆好几个字符串拼起来）。这种情况下 Ruffle 扫不到，需要手动找出来、用 JS API 明确加载。

跨源 iframe

iframe 里如果嵌了 Flash 但 iframe 来自不同域名，Ruffle 因为浏览器同源策略扫不到内部——需要在那个 iframe 页面里单独引一份 Ruffle 脚本。

怎么关掉 polyfill（只手动创建播放器）

如果你不想让 Ruffle 自动扫描，只想完全手动控制，可以在脚本加载前设：

<script>
window.RufflePlayer = {
  config: {
    polyfills: {
      enableScriptFix: false,
      enableFlashPlayerFix: false
    }
  }
};
</script>
<script src="...ruffle.js..."></script>

关掉之后页面上的 Flash 标签不会被自动替换，你需要手动 createPlayer()。