一行 CDN 接入 Ruffle:站长最省事的方案
最简单的一行
把这行放进你有 Flash 内容需要被接管的页面的 <head> 里,或者直接粘到 HTML 的任意位置都行:
<script src="https://unpkg.com/@ruffle-rs/ruffle"></script>
没了。就这一行。
这一行背后发生了什么
浏览器加载完这个 <script> 后,Ruffle 会:
- 在当前页面的 DOM 上搜索所有 Flash 相关的元素(跟浏览器扩展找的范围一样:
<object>、<embed>、通过swfobject生成的那些) - 把它们全部移除、替换成 Ruffle 的容器
- 从同一个 unpkg CDN 继续下载 WebAssembly 运行时(
ruffle_wasm.js、ruffle.wasm)——这一步需要几十 KB 到几百 KB 不等,取决于 SWF 复杂程度 - 开始加载并运行每个被替换位置上的 SWF
你的访客不需要做任何事——他们打开你的网站,Ruffle 自动接管旧 Flash 内容。
为什么推荐 unpkg
| CDN | 优点 | 缺点 |
|---|---|---|
| unpkg(官方推荐) | npm 包自动镜像、永远最新、免费 | 大陆访问有时慢 |
| jsDelivr | 全球节点多、大陆友好 | 更新可能滞后几小时 |
| Cloudflare 自己的 R2 | 自己控制,最稳 | 需要配置 |
如果你的网站访客主要在中国大陆,可以换成 jsDelivr:
<script src="https://cdn.jsdelivr.net/npm/@ruffle-rs/ruffle"></script>
关于版本锁定
默认 unpkg 会拉取 @latest 版本。如果你想锁定到某个特定版本避免意外升级:
<script src="https://unpkg.com/@ruffle-rs/ruffle@0.7.1"></script>
Ruffle 的版本号语义化遵守(0.x 大版本间可能有破坏性变更),线上建议锁到次版本比如 @0.7。
加载时机
- 如果你的 Flash 元素在 HTML 里静态写出(最常见),把
<script src="..."></script>放在<body>末尾就能确保 DOM ready 后再扫描 - 如果你的 Flash 元素是JavaScript 动态插入的(比如 React / Vue 里用 iframe 插、或者
document.write),需要等你的动态代码执行完,再触发 Ruffle 的扫描 - 最简单做法:直接把
<script src>放在</body>前
想先跑自己的配置
默认 Ruffle 用最小配置启动。如果你想自定义(比如强制某个缩放模式),可以在 <script src="..."></script> 之前写一个配置对象:
<script>
window.RufflePlayer = window.RufflePlayer || {};
window.RufflePlayer.config = {
scale: "showAll",
forceScale: true,
autoStart: "auto"
};
</script>
<script src="https://unpkg.com/@ruffle-rs/ruffle"></script>
配置对象里能控制的项详见本分组后面的「常用配置:scale / forceScale / 固定尺寸」页面。
验证嵌入是否成功
F12 开发者工具 → Console 面板里敲 window.RufflePlayer,能看到一个对象说明脚本加载成功。Network 面板里应该能看到 unpkg.com/@ruffle-rs/ruffle 返回了 200 OK。