如何在 ES6 模块中正确加载并使用 GeoGebra Applet-js教程-PHP中文网

如何在 ES6 模块中正确加载并使用 GeoGebra Applet

本文介绍在现代 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，推荐原生替代）：

ES6-ES11新特性相关课件

下载

<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>

⚠️ 注意事项：