GeoGebra 应用嵌入

原文来自 GeoGebra Apps Embedding :: GeoGebra Manual

此页面已翻译为简体中文, 并将 GeoGebra 的官方 CDN 换成了此项目的

快速开始

要将 GeoGebra 应用嵌入到您的页面中，您需要添加以下三个部分：

确保在 <head> 部分中包含以下内容，以确保缩放正常工作（例如在移动浏览器上）并且 Unicode 正常工作：
```
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta charset="utf-8"/>
```

需要使用以下标签包含 JavaScript 库 deployggb.js：

<script src="https://ggb.imwangzhiyu.xyz/geogebra/deployggb.js"></script>

在您的页面上创建一个 GeoGebra 应用的元素：
```
<div id="ggb-element"></div>
```

配置并插入应用：

<script>
    var params = {"appName": "graphing", "width": 800, "height": 600, "showToolBar": true, "showAlgebraInput": true, "showMenuBar": true };
    var applet = new GGBApplet(params, true);
    window.addEventListener("load", function() {
        applet.inject('ggb-element');
    });
</script>

只需将 appName 参数从 graphing 更改为 geometry 或 3d 即可获取我们的其他应用。要加载活动，您可以使用例如 "material_id":"RHYH3UQ8" 或 "filename":"myFile.ggb"，并且可以通过使用各种 GeoGebra 应用参数进一步自定义我们的应用。

教程

请参见此处 (英文) 了解更长的教程，该教程解释了不同的嵌入选项。

离线和自托管解决方案

我们建议您使用我们全球和超快速服务器网络 www.geogebra.org 上的 GeoGebra 应用，如上所示，但如果您更喜欢自己托管和更新 GeoGebra 应用，您可以下载我们的 GeoGebra 数学应用捆绑包。嵌入代码几乎与上述相同，有两个区别：包含 deployggb.js 的标签需要更改为

    <script src="GeoGebra/deployggb.js"></script>

并且在 inject() 调用之前需要包含以下行： ``javascript applet.setHTML5Codebase('GeoGebra/HTML5/5.0/web3d/');

或者，如果您只需要固定到特定版本，则仍然可以使用 CDN，如下所示（不要更改 `5.0`，只更改 `498`）：
```javascript
    applet.setHTML5Codebase("https://ggb.imwangzhiyu.xyz/geogebra/5.0.498.0/web3d");

由于技术原因，在版本 804 之后，您需要使用 5.2 而不是 5.0，例如：

    applet.setHTML5Codebase("https://ggb.imwangzhiyu.xyz/geogebra/5.2.804.0/web3d");

调整嵌入应用的外观

此功能目前仅适用于 GeoGebra Notes。要更改 UI 元素的颜色，您可以设置一些 CSS 变量：

    <style>
    body {
      --ggb-primary-color: #ee0290; /* 用于大多数 UI 元素，包括工具栏标题和按钮 */
      --ggb-primary-variant-color: #880061; /* 用于悬停时的浮动按钮 */
      --ggb-dark-color: #880061; /* 用于对话框中的高亮文本 */
      --ggb-light-color: #f186c0; /* 用于进度条 */
    }
    </style>

使用服务工作者加快加载时间

您可以通过使用服务工作者加快 GeoGebra 库的加载时间。要使用服务工作者，您应该使用 setHTML5Codebase() 设置 GeoGebra 的特定版本。

要安装服务工作者，首先必须在您的域下包含 sworker-locked.js 文件（例如 www.example.com/path/sworker-locked.js）。服务工作者文件可以在 GeoGebra 数学应用捆绑包的 GeoGebra/HTML5/5.0/web3d/ 文件夹中找到。

接下来，在加载 GeoGebra 的页面上包含以下代码段。请更改服务工作者的路径。您还可以设置 appletLocation 变量以仅在特定文件夹中启用工作者（或将其保留为 '/' 以在您的域的所有页面上使用）：

    var serviceWorkerPath = '/sworker-locked.js'
    var appletLocation = '/'
    function isServiceWorkerSupported() {
        return 'serviceWorker' in navigator && location.protocol === "https:";
    }

    function installServiceWorker() {
        if (navigator.serviceWorker.controller) {
            console.log("Service worker is already controlling the page.");
        } else {
            navigator.serviceWorker.register(serviceWorkerPath, {
                scope: appletLocation
            });
        }
    }

    if (isServiceWorkerSupported()) {
        window.addEventListener('load', function() {
            installServiceWorker()
        });
    } else {
        console.log("Service workers are not supported.");
    }

安装后，当用户打开启用了服务工作者的页面时，应用脚本将由服务工作者下载并缓存。这样，下次同一用户访问该页面时，脚本将从缓存中加载，而不是再次从服务器下载。