转自https://www.zywvvd.com/2020/12/19/tools/geogebra/geogebra-html-embed/geogebra-html-embed/#valine-comments

geogebra是优秀的数学绘图工具，可以描述数学图像并演示，支持互动，功能强大。本文介绍将geogebra嵌入网页的方法。

一. 网页嵌入方法

使用iframe

  • iframe` 元素会创建包含另外一个文档的内联框架（即行内框架）。

获取geogebra图形的iframe代码

<iframe 
scrolling="no" 
title="布丰投针实验" src="https://www.geogebra.org/material/iframe/id/A25F9Tzs/width/1347/height/598/border/888888/smb/false/stb/false/stbh/false/ai/false/asb/false/sri/true/rc/false/ld/false/sdz/true/ctl/false" 
width="800px" 
height="400px">
</iframe>
  • 上述代码放在单独的html文件中即可运行

二. 官网js解析ggb文件信息

  • 将画好的图形下载成ggb文件格式
  • 将该文件上传到网络（不允许读取本地的文件），链接必须为http, data, chrome, chrome-extension, chrome-untrusted, https类型之一。
  • 获取文件链接，以我的链接 https://photos.zywvvd.com/images_matrixtime/20201219164932.ggb 为例
  • 向html文件黏贴代码：
<script src="https://cdn.geogebra.org/apps/deployggb.js"></script>

<div id="ggbApplet"></div>

<script>
var parameters = {
"id": "ggbApplet",
"width":468,
"height":492,
"showToolBar":true,
"language":"zh",
"filename":"https://photos.zywvvd.com/images_matrixtime/20201219164932.ggb",
};
// is3D=is 3D applet using 3D view, AV=Algebra View, SV=Spreadsheet View, CV=CAS View, EV2=Graphics View 2, CP=Construction Protocol, PC=Probability Calculator DA=Data Analysis, FI=Function Inspector, macro=Macros
var views = {'is3D': 0,'AV': 0,'SV': 0,'CV': 0,'EV2': 0,'CP': 0,'PC': 0,'DA': 0,'FI': 0,'macro': 0};
var applet = new GGBApplet(parameters, '5.0', views);
window.onload = function() {applet.inject('ggbApplet')};
applet.setPreviewImage('data:image/gif;base64,R0lGODlhAQABAAAAADs=','https://www.geogebra.org/images/GeoGebra_loading.png','https://www.geogebra.org/images/applet_play.png');
</script>

三.官网js解析ggbBase64信息

  • 得到如下这段代码，这段代码直接黏贴到一个空的html文件联网即可运行。

    <script src="https://cdn.geogebra.org/apps/deployggb.js"></script>

<div id="ggbApplet"></div>

<script>
var parameters = {
"id": "ggbApplet",
"width":468,
"height":492,
"showToolBar":true,
"language":"zh",
// use this instead of ggbBase64 to load a material from geogebra.org
// "material_id":"RHYH3UQ8",
// use this instead of ggbBase64 to load a .ggb file
// "filename":"myfile.ggb",
"ggbBase64":"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",
};
// is3D=is 3D applet using 3D view, AV=Algebra View, SV=Spreadsheet View, CV=CAS View, EV2=Graphics View 2, CP=Construction Protocol, PC=Probability Calculator DA=Data Analysis, FI=Function Inspector, macro=Macros
var views = {'is3D': 0,'AV': 0,'SV': 0,'CV': 0,'EV2': 0,'CP': 0,'PC': 0,'DA': 0,'FI': 0,'macro': 0};
var applet = new GGBApplet(parameters, '5.0', views);
window.onload = function() {applet.inject('ggbApplet')};
applet.setPreviewImage('data:image/gif;base64,R0lGODlhAQABAAAAADs=','https://www.geogebra.org/images/GeoGebra_loading.png','https://www.geogebra.org/images/applet_play.png');
</script>

    四. 本地js解析ggbBase64信息

  • 继续按照官方教程行事 https://wiki.geogebra.org/en/Reference:GeoGebra_App_Parameters
  • 主要在Offline and Self-Hosted Solution这一部分
  • 需要自己下载相关的js文件（deployggb.js和5.0/web3d/）
  • 配置deployggb.js和5.0/web3d/的位置
  • 我将deployggb.js放在了/js/deployggb.js下；web3d放在了/js/5.0/web3d/位置
  • 代数区输入公式 创建图形
  • 为了让图形居中显示，在调用的div模块上加入style设置style='margin:0 auto'：

  • 综上，在html贴上如下代码：

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

<script>
var parameters = {
"id": "ggbApplet",
"width":500,
"height":500,
"showResetIcon":true,
"borderColor":"white",
"language":"en",
"ggbBase64":"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"};
var applet = new GGBApplet(parameters, '5.0');
applet.setHTML5Codebase('/js/5.0/web3d/');
window.onload = function() {applet.inject('ggbApplet')};
</script>

<div id="ggbApplet" style='margin:0 auto'></div>

五. 本地js解析ggb文件信息

  • 与官网解析ggb文件一样，首先获取ggb文件，将文件上传，获取链接

  • 将上文的ggbBase64替换为filename，附上链接，向网页黏贴代码

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

<script>
var parameters = {
"id": "ggbApplet",
"width":500,
"height":500,
"borderColor":"white",
"language":"en",
"filename":"https://photos.zywvvd.com/images_matrixtime/20201219164932.ggb"};
var applet = new GGBApplet(parameters, '5.0');
applet.setHTML5Codebase('5.0/web3d/');
window.onload = function() {applet.inject('ggbApplet')};
</script>

<div id="ggbApplet"></div>

    js解析ggb信息过程中的参数设置

  • 参考：https://wiki.geogebra.org/en/Reference:GeoGebra_App_Parameters
  • 可以根据个人需求设置各项参数