在网页中嵌入GeoGebra图形

摘要: 在网页中嵌入 GeoGebra 图形文件的方法主要有三种：嵌入一个 iframe 元素、使用 deployggb.js 脚本直接注入ggb文件内容、使用 web.nocache.js 脚本直接注入ggb文件内容。前两种见官方的“Reference:Applet Embedding”，本文介绍最后一种更灵活的方式。

2D样例

HTML 代码：

<script src="http://ggbstudy.top/ggb/webSimple/webSimple.nocache.js"></script>
<article class="geogebrawebs"
         data-param-width="650"
         data-param-height="460"
         data-param-useBrowserForJS="false"
         data-param-enableShiftDragZoom="false"
         data-param-ggbbase64="UEs......==">
</article>

引入GGB脚本 <script src="http://ggbstudy.top/ggb/webSimple/webSimple.nocache.js"></script>
在国内访问 GGB官方的脚本较慢，所以使用了托管在阿里云（ggbstudy.top）的缓存代码。
webSimple.nocache.js 相对于 web.nocache.js 的主要区别是前者适合嵌入无工具栏的简单界面、
可以不显示代数列表的两栏分隔界面，而后者支持3D模型。
在一个 geogebrawebs 类的article元素中指定ggb文件内容。
- 注意：这里不是官方说明的 geogebraweb 类，本站针对使用 webSimple.nocache.js 的网页将类名改为 geogebrawebs，
  以便在同一个网页中能同时使用 webSimple.nocache.js 和 web.nocache.js 来嵌入多个图形。
- data-param-id：如果一个网页嵌入多个图形，则需要为每个图形的 article 指定不同的id，例如“ggbApplet1”、“applet2”。
- data-param-ggbbase64：指定ggb文件内容的base64编码。
  要得到base64编码，可以使用“Smart Base64”等工具，或者使用本站提供的转换网页。
- data-param-width 和 data-param-height：指定显示宽高，整数像素值。如果不指定则使用默认宽高显示。
- data-param-useBrowserForJS：使用网页文件中的js代码(true)或使用ggb文件中的js代码(false)。
  本例中的ggb文件中包含了自定义脚本，所以设置为false。在版本4.0到4.4中需要设置此属性，在5.0（本站所用版本）中此属性貌似无用。
- data-param-enableShiftDragZoom：是否允许用鼠标拖放和滚轮滚动放缩显示。
  按下Shift键再拖动或滚动总能放缩，官方描述中在这点上是错误的。
- data-param-enableRightClick：是否允许鼠标右键弹出上下文菜单。
更多参数见 Reference:Applet Parameters，需要加上参数前缀data-param-，不区分大小写。

3D样例

HTML 代码：

<script src="http://ggbstudy.top/ggb/webSimple/webSimple.nocache.js"></script>
<article class="geogebraweb"
         data-param-width="780" data-param-height="460"
         data-param-enableRightClick="false"
         data-param-ggbbase64="UEsDBBQ...AAAAA=">
</article>

引入GGB脚本 <script src="http://ggbstudy.top/ggb/webSimple/webSimple.nocache.js"></script>
不使用 webSimple.nocache.js 是因为该文件不支持3D模型。
在一个geogebraweb类的article元素中指定ggb文件内容。
需要指定宽高以便在 iframe 中正常显示。参数说明见 Reference:Applet Parameters。
使用 iframe 嵌入3D模型网页（注：本站的新版本已允许两者共存，见样例效果）。
在本页面中已经嵌入了一个使用 webSimple.nocache.js 的2D图形，
为了不引起冲突，本页面的3D图形采用 iframe 嵌入：

1	<iframe style="width: 800px; height: 480px;" src="http://foo.bar/your3d.html"></iframe>

本文所介绍的第三种嵌入方法在GGB官方未明显介绍，但在实际使用中比较方便，故推荐，欢迎探讨指正。

嵌入带工具栏的ggb文件

本图可用于“尺规作图”。使用 showToolBar 显示工具栏，在中可定制工具栏。
图形来源：官方网站的“Basic Construct”。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>Basic Construct</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
  <script src="http://ggbstudy.top/ggb/webSimple/webSimple.nocache.js"></script>
</head>
<body>
<article class="geogebraweb" data-param-showToolBar="true"
         data-param-ggbbase64="UEsDBBQACA...A">
</article>
</body>
</html>

参考资料

分享到：更多