本文介绍在现代 JavaScript 模块（ES6 module）环境中安全初始化 GeoGebra 应用程序的方法，解决因 deployggb.js 依赖全局执行上下文导致的 __gwt_getMetaProperty is not defined 报错问题。
本文介绍在现代 javascript 模块（es6 module）环境中安全初始化 geogebra 应用程序的方法，解决因 `deployggb.js` 依赖全局执行上下文导致的 `__gwt_getmetaproperty is not defined` 报错问题。
GeoGebra 官方提供的 deployggb.js 是一个为传统 <script> 标签设计的脚本，其内部依赖全局作用域和特定的加载时序（如 window 上的 __gwt_getMetaProperty 等 GWT 运行时钩子）。当直接通过 import 'https://cdn.geogebra.org/apps/deployggb.js' 在 ES6 模块中引入时，模块作用域会隔离这些全局变量，导致初始化失败。</script>
✅ 正确做法是：避免静态 import，改用动态脚本注入方式，确保 deployggb.js 在全局上下文中执行，并在其加载完成后再实例化 GGBApplet。
以下是一个稳定、可复用的实现方案（无需 jQuery，推荐原生替代）：
<div id="ggb"></div>
<script type="module">
// ✅ 原生动态加载（推荐，无第三方依赖）
async function loadGeoGebra() {
const script = document.createElement('script');
script.src = 'https://www.geogebra.org/apps/deployggb.js';
script.defer = true;
return new Promise((resolve) => {
script.onload = () => {
// 确保 GGBApplet 已挂载到 window
if (typeof window.GGBApplet !== 'undefined') {
resolve();
} else {
throw new Error('GeoGebra API failed to initialize');
}
};
script.onerror = () => {
throw new Error('Failed to load deployggb.js');
};
document.head.appendChild(script);
});
}
// 使用示例
loadGeoGebra().then(() => {
const el = document.getElementById('ggb');
const params = {
appName: 'classic',
width: 800,
height: 600,
showToolBar: true,
showAlgebraInput: true,
useBrowserForJS: true
};
const applet = new window.GGBApplet(params, true);
applet.inject(el);
}).catch(console.error);
</script>⚠️ 注意事项：
- 不要使用 import 语句加载 deployggb.js —— 它不是 ESM 兼容模块；
- 动态创建 <script> 并插入 document.head 可保证其在全局作用域执行，恢复所需的 GWT 运行时环境；</script>
- 建议显式检查 window.GGBApplet 是否存在，避免竞态条件；
- 若项目已使用 jQuery，原答案中的 jQuery.getScript() 也可行，但增加额外依赖不必要；
- GeoGebra 官方尚未发布 ESM 版本 SDK，此方案是当前生产环境最稳妥的兼容方案。
总结：ES6 模块与传统脚本混合使用时，应尊重其执行模型差异——对非模块化第三方库，优先采用动态 <script> 注入 + Promise 包装的方式，兼顾现代构建规范与运行时兼容性。</script>
