本文介绍如何用 `addeventlistener('load', ...)` 替代脆弱的 `window.onload` 赋值方式，并通过 `try/catch` 批量注入 geogebra 小程序，确保单个失败不影响其余初始化流程。
在 Web 开发中，直接赋值 window.onload = function() {...} 是一种简单但高风险的做法：它会覆盖之前设置的任何 onload 处理器，且一旦函数内部某行代码抛出异常（例如 GeoGebra 实例未定义、目标 DOM 元素不存在、inject() 方法调用失败），后续所有初始化逻辑将被中断——这正是你在嵌入多个 GeoGebra 小程序时遇到的问题。
更健壮、更现代的替代方案是使用 window.addEventListener('load', handler, options)。它支持注册多个独立的加载事件监听器，彼此互不干扰，且可通过 {once: true} 选项确保监听器仅执行一次并自动清理，避免内存泄漏。
✅ 推荐方案一：分散式监听（适合模块化初始化）
你可以为每个 GeoGebra 实例单独注册一个 load 监听器，位置灵活（例如紧随对应 <script> 块之后）：
<!-- 在定义 applet_0 后 -->
<script>
addEventListener('load', () => {
try {
applet_0.inject('ggb-element-0');
} catch (err) {
console.warn('[GeoGebra] Failed to inject applet_0:', err.message);
}
}, { once: true });
</script>重复此模式即可实现完全解耦的容错初始化——任一失败均不会阻塞其他实例。
✅ 推荐方案二：集中式处理（推荐用于统一错误管理）
若希望保持逻辑集中、便于日志聚合与调试，建议采用单个监听器 + 数组驱动 + 异常捕获的方式：
<script>
addEventListener('load', () => {
const applets = [
[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']
];
applets.forEach(([applet, selector]) => {
try {
if (typeof applet?.inject === 'function') {
applet.inject(selector);
} else {
throw new Error(`Applet is not ready or missing inject method`);
}
} catch (err) {
console.error(`❌ GeoGebra injection failed for ${selector}:`, err);
// 可选：向用户显示友好提示，或记录到监控系统
}
});
}, { once: true });
</script>? 关键增强点： 显式检查 applet.inject 是否为函数，避免 TypeError: Cannot read property 'inject' of undefined； 使用结构化数组降低维护成本，新增/删减小程序只需修改数据，无需动逻辑； 错误信息包含具体 selector，便于快速定位问题元素。
⚠️ 注意事项
- 执行时机：load 事件在页面所有资源（含图片、脚本、样式表、iframe 等）加载完毕后触发，确保 DOM 和 GeoGebra 库已就绪。若需更早执行（如 DOM 解析完成但资源未全载），可改用 DOMContentLoaded 事件，但需确认 GeoGebra API 已可用；
- 兼容性：addEventListener 和 {once: true} 在 IE9+ 和所有现代浏览器中均受支持（IE9 不支持 {once}，如需兼容可手动移除监听器）；
- GeoGebra 加载顺序：确保所有 applet_X 变量已在 load 触发前声明并初始化（通常由 GeoGebra 提供的 <script> 标签异步加载并全局暴露）。
综上，摒弃 window.onload = ... 的覆盖式写法，转而采用 addEventListener('load', ..., {once: true}) 配合防御性编程（try/catch + 类型校验），不仅能彻底解决单点失败导致整批初始化中断的问题，还能提升代码可维护性与可观测性。
