本文介绍如何替代脆弱的 `window.onload = ...` 赋值方式，通过 `addeventlistener('load', ..., {once: true})` 实现健壮、可扩展的页面加载处理，并结合 `try/catch` 保证单个 geogebra 小程序注入失败不影响其余初始化。
在嵌入多个 GeoGebra 应用（如教学互动图表）的网页中，常见的做法是在 window.onload 中批量调用 .inject() 方法将各个 applet 绑定到对应 DOM 元素。但直接赋值 window.onload = function() { ... } 存在两个严重缺陷：覆盖性（后续赋值会完全替换前一个）和脆弱性（任一 inject() 抛出异常，后续所有初始化均被跳过）。
更优解是使用现代事件监听机制——addEventListener 配合 {once: true} 选项。它允许多个独立的加载回调按注册顺序执行，且自动清理，彻底避免覆盖问题：
<script>
// 可分散在各处（例如紧邻对应 applet 声明之后）
addEventListener('load', () => applet_0.inject('ggb-element-0'), { once: true });
addEventListener('load', () => applet_1.inject('ggb-element-1'), { once: true });
addEventListener('load', () => applet_2_NoLimit.inject('ggb-element-2-NoLimit'), { once: true });
// …更多
</script>若需集中管理、统一错误日志或动态控制注入流程，推荐采用单事件处理器 + 数组驱动 + 异常捕获模式：
addEventListener('load', () => {
const injections = [
[applet_0, 'ggb-element-0'],
[applet_1, 'ggb-element-1'],
[applet_2_NoLimit, 'ggb-element-2-NoLimit'],
[applet_2_YesLimit, 'ggb-element-2-YesLimit'],
[applet_3, 'ggb-element-3'],
[applet_4_Flat, 'ggb-element-4-Flat'],
[applet_4_Faster, 'ggb-element-4-Faster']
];
injections.forEach(([applet, selector]) => {
try {
applet.inject(selector);
console.log(`✅ Successfully injected ${selector}`);
} catch (err) {
console.error(`❌ Failed to inject ${selector}:`, err.message || err);
// 可选：记录到监控系统、显示用户提示、降级为静态图等
}
});
}, { once: true });✅ 优势总结：
- 容错性强：单个 applet 加载失败（如资源 404、API 变更、DOM 不存在）不会中断全局初始化；
- 可维护性高：配置集中、结构清晰，增删 applet 仅需修改数组；
- 符合标准：addEventListener 是 W3C 推荐方案，兼容所有现代浏览器（包括 IE9+）；
- 无副作用：{once: true} 确保回调只执行一次，避免内存泄漏或重复注入风险。
⚠️ 注意事项：
- 确保所有 applet_X 对象在 load 事件触发前已正确定义（通常 GeoGebra 的 <script> 标签应置于该注入脚本之前）；
- 若部分容器元素（如 #ggb-element-2-NoLimit）可能动态生成或条件渲染，请在 inject() 前校验 document.querySelector(selector) 是否存在；
- 生产环境建议补充 console.warn 或 Sentry 错误上报，便于快速定位嵌入失败原因。
通过这一重构，你的 GeoGebra 教学页面将获得企业级的健壮性与可维护性。
