侧边栏壁纸
博主头像
琉璃红梅 博主等级

琉璃世界,白雪红梅。

  • 累计撰写 52 篇文章
  • 累计创建 102 个标签
  • 累计收到 5 条评论

目 录CONTENT

文章目录

Halo系列-嵌入GeoGebra

雪穗
2025-12-31 / 0 评论 / 0 点赞 / 33 阅读 / 0 字
温馨提示:
本文最后更新于2025-12-31,若内容或图片失效,请留言反馈。 若部分素材不小心影响到您的利益,请联系我删除。

说明:

1.参数的翻译由AI翻译完成

2.其它博客系统也可以参考进行嵌入,只不过这里以Halo建站系统为例

1.简单介绍

GeoGebra官网:https://www.geogebra.org/

GeoGebra经典:https://www.geogebra.org/classic

GeoGebra 是一款功能强大的动态数学软件,它将几何、代数、表格、图形、统计和微积分整合在一个易于使用的软件包中。GeoGebra可以在线使用,也可以通过下载应用程序离线使用。我希望将在GeoGebra中的图形呈现在博客中并提供交互,几番搜索和查找,获悉如下两种较好的方式。

iframe嵌入:简单方便、隔离性好(不会与已有的样式发生冲突),修改之后刷新页面会及时更新,如果GeoGebra官网无法访问,则嵌入GeoGebra图像也无法访问。

本地js嵌入:需要下载渲染图形相关的js文件到本地服务器中并使用嵌入代码,可能会存在与网页样式冲突的问题,不依赖GeoGebra官方服务器,需要下载 ggbggbBase64 格式的文件到本地服务器。

在不需要很复杂的功能情况下iframe嵌入是最好的选择,当然js嵌入也可以从官方服务器加载js文件。

2.iframe嵌入

点击分享获取材料id

其中 xxyfgptv 为材料id

PixPin_20251207215248

复制之后获取到的完整的嵌入代码

<iframe 
        src="https://www.geogebra.org/calculator/xxyfgptv?embed" 
        width="800" 
        height="600" 
        allowfullscreen 
        style="border: 1px solid #e4e4e4;border-radius: 4px;" 
        frameborder="0">
</iframe>

如果直接使用GeoGebra提供给我们的嵌入代码,读者是可以自己修改图形和参数的,我们希望的是读者仅可以查看图形以及通过我们自己提供的交互按钮进行交互。这就需要我们修改src中的部分内容并根据情况加入一些控制参数,然后在Halo默认编辑器中点击 嵌入网页,输入 src 中的内容即可,这种方式可以还可以通过编辑器自带的功能调整宽和高,或者新建HTML内容块(需要安装 Markdown/HTML内容块 插件),将如下全部内容输入到内容块中,前者只需要输入链接即可,推荐前者。

<iframe                                               
src="https://www.geogebra.org/material/iframe/id/xxyfgptv/width/800/height/600/rc/false/sdz/true/smb/false/stb/false/sri/true/ctl/true/sfsb/true/szb/true"
        width="800" 
        height="600"
        allowfullscreen 
        style="border: 1px solid #e4e4e4;border-radius: 4px;" 
        frameborder="0">
</iframe>

嵌入效果展示:

衰减正弦波

如下为可以控制GeoGebra画布的参数,界面语言跟随浏览器语言,无法自定义

参数说明

功能描述

翻译

参数代码

示例

Enable Right Click, Zooming and Keyboard Editing

启用右键菜单、缩放和键盘编辑

rc

/rc/true

Show Input Bar

显示输入栏

ai

/ai/true

Enable Shift-Drag & Zoom

启用 Shift+拖拽 和 鼠标滚轮缩放

sdz

/sdz/true

Show Menu Bar

显示菜单栏

smb

/smb/true

Show Toolbar

显示工具栏

stb

/stb/true

Show Toolbar Help

显示工具栏帮助

stbh

/stbh/true

Allow label dragging

允许拖动标签

ld

/ld/true

Show reset icon (top-right)

显示重置图标(右上角)

sri

/sri/true

Show play button that starts the construction

显示启动构造的播放按钮

ctl

/ctl/true

Show full-screen button. Make sure you also add allowfullscreen to the iframe tag

显示全屏按钮(需同时在 iframe 标签中添加 allowfullscreen 属性)

sfsb

/sfsb/true

Show zoom buttons

显示缩放按钮

szb

/szb/true

3.本地js嵌入

说明:

1.需要安装 https://www.halo.run/store/apps/app-NgHnY 插件

2.js文件下载地址:geogebra-math-apps-bundle

下载文件js文件并上传至本地服务器,我这里上传到Halo服务器,由于Halo的附件上传只能上传文件而不能上传文件夹,所以需要我们自己上传至Halo服务器的指定目录中,halo 代表Halo的安装目录,这样我们就可以像使用附件一样使用这些文件,实际只需要 deployggb.js web3d

 halo/attachments/upload/GeoGebra/
 ├── deployggb.js
 └── HTML5
     └── 5.0
         ├── css
         ├── GeoGebra.html
         ├── web
         ├── web3d
         └── webSimple

点击 本地保存 或者 下载 获取 ggb 文件,上传到附件中

PixPin_20251207215410

插入HTML内容块中,并加入如下内容

 <!-- GeoGebra 应用容器 -->
 <div id="ggbApplet" style="margin:0 auto"></div>
 <!-- GeoGebra 库文件 -->
 <script src="https://www.sqwfly.top/upload/GeoGebra/deployggb.js"></script>
 <script>
 // ==================== GeoGebra 应用配置 ====================
 var parameters = {
     "id": "ggbApplet",
     "width": 500,
     "height": 500,
     "borderColor": "white",
     "language": "zh",
     "enableRightClick": false,
     "showZoomButtons": true,
     "showFullscreenButton": true,
     "filename": "https://www.sqwfly.top/upload/衰减正弦波.ggb",
 };
 ​
 // ==================== 初始化 GeoGebra 应用 ====================
 function initGeoGebraApplet() {
     try {
         // 创建应用实例
         var applet = new GGBApplet(parameters, "5.0");
         // 设置自定义代码库路径(加速加载)
         applet.setHTML5Codebase("https://www.sqwfly.top/upload/GeoGebra/HTML5/5.0/web3d/");
         // 注入到DOM中
         applet.inject("ggbApplet");
         console.log("GeoGebra: 应用初始化成功");
     } catch (error) {
         console.error("GeoGebra: 初始化失败:", error);
         // 可以在这里添加错误处理,比如显示用户友好的错误信息
         document.getElementById("ggbApplet").innerHTML = 
             '<div style="color:red; text-align:center; padding:20px;">' +
             'GeoGebra 应用加载失败,请刷新页面重试</div>';
     }
 }
 ​
 // ==================== 页面加载完成后初始化 ====================
 // 使用DOMContentLoaded而不是window.onload,可以更早执行
 document.addEventListener("DOMContentLoaded", function() {
     // 检查是否已加载GeoGebra库
     if (typeof GGBApplet === 'undefined') {
         console.error("GeoGebra: deployggb.js 未正确加载");
         return;
     }
     // 初始化应用
     initGeoGebraApplet();
 });
 ​
 // 如果DOMContentLoaded已经触发,直接初始化
 if (document.readyState === "interactive" || document.readyState === "complete") {
     if (typeof GGBApplet !== 'undefined') {
         initGeoGebraApplet();
     }
 }
 </script>

以下为详细的可配置参数

参数说明

参数名

值示例

描述

翻译

引入版本

appName

"graphing"

app name, default: "classic" "graphing" … GeoGebra Graphing Calculator "geometry" … GeoGebra Geometry "3d" … GeoGebra 3D Graphing Calculator "classic" … GeoGebra Classic "suite" … GeoGebra Calculator Suite "evaluator" … Equation Editor "scientific" … Scientific Calculator "notes" … GeoGebra Notes

应用名称 默认值:"classic" "graphing" … 绘图计算器 "geometry" … 几何 "3d" … 3D绘图计算器 "classic" … 经典版 "suite" … 计算器套件 "evaluator" … 公式编辑器 "scientific" … 科学计算器 "notes" … 笔记应用

6.0

width

800

Applet width (compulsory field unless using scaleContainerClass)

宽度(像素,除非使用scaleContainerClass否则必需)

-

height

600

Applet height (compulsory field unless using scaleContainerClass)

高度(像素,除非使用scaleContainerClass否则必需)

-

material_id

"RHYH3UQ8"

GeoGebra Materials id to load

材料ID(要加载的GeoGebra材料ID)

5.0

filename

"myFile.ggb"

URL of file to load

文件名(要加载文件的URL)

4.0

ggbBase64

base64 encoded .ggb file

Encoded file to load

Base64编码文件(Base64编码的.ggb文件)

4.0

borderColor

#FFFFFF

Color of the border line drawn around the applet panel (as hex rgb string). Default: gray

边框颜色(十六进制RGB字符串,默认:灰色)

3.0

borderRadius

number

Size of applet's border radius in pixels

边框圆角半径(像素)

6.0

enableRightClick

true or false

States whether right clicks should be handled by the applet. Setting this parameter to "false" disables context menus, properties dialogs and right-click-zooming. Default: true. NB also enables/disables some keyboard shortcuts eg Delete and Ctrl + R (recompute all objects)

启用右键点击 设为"false"时禁用:上下文菜单、属性对话框、右键缩放 默认:true 同时影响键盘快捷键(如Delete、Ctrl+R)

3.0

enableLabelDrags

true or false

States whether labels can be dragged. Default: true

启用标签拖动(默认:true)

3.2

enableShiftDragZoom

true or false

States whether the Graphics View(s) should be moveable using Shift+mouse drag (or Ctrl+mouse drag) or zoomable using Shift+mouse wheel (or Ctrl+mouse wheel). Setting this parameter to "false" disables moving and zooming of the drawing pad. Default: true

启用Shift拖拽缩放 设为"false"时禁用绘图板的移动和缩放 默认:true

3.0

showZoomButtons

true or false

States whether the zoom in / zoom out / home buttons should be shown in the Graphics View or not. Default: false

显示缩放按钮(放大/缩小/主页按钮,默认:false)

6.0

errorDialogsActive

true or false

States whether error dialogs will be shown if an invalid input is entered (using the Input Bar or JavaScript) Default: true

显示错误对话框(输入无效时显示,默认:true)

3.2

showMenuBar

true or false

States whether the menubar of GeoGebra should be shown in the applet. Default: false

显示菜单栏(默认:false)

2.5

showToolBar

true or false

States whether the toolbar with the construction mode buttons should be shown in the applet. Default: false

显示工具栏(默认:false)

2.5

showToolBarHelp

true or false

States whether the toolbar help text right to the toolbar buttons should be shown in the applet

显示工具栏帮助文本

3.0

customToolBar

"0 1 2 3 , 4 5 6 7"

Sets the toolbar according to a custom toolbar string where the int values are Toolbar Mode Values, , adds a separator within a menu, | starts a new menu and || adds a separator in the toolbar before starting a new menu. This will override the saved toolbar from the .ggb file / base64 string. Custom tools are numbered 100001, 100002, etc

自定义工具栏 使用工具栏模式值定义工具栏 ",":菜单内分隔符 "|":新菜单 "||":工具栏分隔符 会覆盖.ggb文件中的工具栏设置

2.5

customToolbox

"pen, shapes.line, shapes.square, link"

Sets the Notes toolbox content using the Notes tools names. The comma separated list can contain individual tool names or the names of categories (part of tool name before the dot). Ordering of tools within the string does not change the order in the UI

自定义工具箱(Notes应用) 使用工具名称设置工具箱内容 逗号分隔列表可包含:单个工具名或类别名

6.0

showAlgebraInput

true or false

States whether the algebra input line (with input field, greek letters and command list) should be shown in the applet. Default: false

显示代数输入栏(默认:false)

2.5

showResetIcon

true or false

States whether a small icon (GeoGebra ellipse) should be shown in the upper right corner of the applet. Clicking on this icon resets the applet (i.e. it reloads the file given in the filename parameter). Default: false

显示重置图标(右上角椭圆图标,点击重置应用,默认:false)

2.5

language

iso language string

GeoGebra tries to set your local language automatically (if it is available among the supported languages, of course). The default language for unsupported languages is English. If you want to specify a certain language manually, please use this parameter

语言(ISO语言代码,自动检测本地语言,不支持时默认英语)

2.5

country

"AT" (for Austria)

This parameter only makes sense if you use it together with the language parameter

国家/地区(ISO国家代码,需与language参数一起使用)

2.5

id

"applet2"

This parameter allows you to specify the argument passed to the JavaScript function ggbOnInit(), which is called once the applet is fully initialised. This is useful when you have multiple applets on a page

ID标识符 传递给ggbOnInit()函数的参数 用于页面中有多个应用时区分

3.2

allowStyleBar

true or false

Determines whether the Style Bar can be shown (or will be shown if just Graphics View 1 is showing) Default: false

允许样式栏(默认:false)

4.0

randomize

true or false

Determines whether random numbers should be randomized on file load. Useful when you want the app to reload in exactly the same state it was saved. Default: true

随机化 文件加载时是否随机化随机数 默认:true

6.0

randomSeed

"randomSeed":33

Specify seed for random numbers. Note that if you save a state of the app after user interacted with it and try to reload that state with the same randomSeed, you may get a different result. Use randomize for those use-cases

随机种子 指定随机数种子 注意:用户交互后保存的状态用相同种子重载可能得到不同结果

5.0

appletOnLoad

function(api){ api.evalCommand('Segment((1,2),(3,4))'); }

JavaScript method to run when the activity is initialized (and file loaded if applicable)

应用加载回调 应用初始化时运行的JavaScript方法

5.0

useBrowserForJS

true or false

When true, GeoGebra runs ggbOnInit from HTML, ignores ggbOnInit from file, ignores JS update scripts of objects in file. When false, GeoGebra ignores ggbOnInit from HTML (use appletOnLoad parameter of GGBApplet instead), runs ggbOnInit from file, runs JS update scripts of objects in file. Default: false

使用浏览器JS true:从HTML运行ggbOnInit,忽略文件中的JS false:从文件运行ggbOnInit和JS更新脚本 默认:false

4.0

showLogging

true or false

Determines whether logging is shown in the Browser's console. Default: false

显示日志(浏览器控制台,默认:false)

4.2

capturingThreshold

integer

Determines the sensitivity of object selection. The default value of 3 is usually fine to select and drag objects both with the mouse and touch. Use larger values (e.g. 4 or 5) to make it easier to select and drag objects. Default: 3

捕获阈值 对象选择灵敏度 默认:3(适合鼠标和触摸) 值越大越容易选择拖动

4.4

enableFileFeatures

true or false

Determines whether file saving, file loading, sign in and Options > Save settings are enabled. This argument is ignored when menubar is not showing. Default: true

启用文件功能 文件保存/加载、登录、保存设置 菜单栏不显示时忽略此参数 默认:true

5.0

enableUndoRedo

true or false

Determines whether Undo and Redo icons are shown. This argument is ignored when toolbar is not showing. Default: true

启用撤销重做 工具栏不显示时忽略此参数 默认:true

6.0

perspective

string

For values see SetPerspective_Command. Just for a blank start ie shouldn't be used with material_id, filename or ggbBase64 parameters

视角/布局 参考SetPerspective_Command 仅用于空白启动(不与material_id等参数共用)

5.0

enable3d

true or false or none

Whether 3D should be enabled (for exam mode). When neither true nor false are entered, user can decide in a dialog

启用3D(考试模式) 不设置true/false时用户可在对话框中选择

5.0

enableCAS

true or false or none

Whether CAS should be enabled (for exam mode). When neither true nor false are entered, user can decide in a dialog

启用CAS(计算机代数系统,考试模式) 不设置true/false时用户可在对话框中选择

5.0

algebraInputPosition

"algebra", "top" or "bottom"

Determines whether input bar should be shown in algebra, on top of the applet or under the applet. When left empty (default), the position depends on file

代数输入栏位置 "algebra":代数视图内 "top":应用顶部 "bottom":应用底部 默认:取决于文件

5.0

preventFocus

true or false

When set to true, this prevents the applet from getting focus automatically at the start. Default: false

防止自动聚焦(默认:false)

5.0

scaleContainerClass

String

Name of CSS class that is used as container; applet will scale to fit into the container

缩放容器类名 CSS类名,应用会缩放以适应容器

5.0

autoHeight

boolean

• true to restrict the width of the applet and compute height automatically • false if you want the applet to be restricted by both width and height of the container

自动高度 true:限制宽度,自动计算高度 false:同时受容器宽高限制

5.0

allowUpscale

true or false

Determines whether automatic scaling may scale the applet up. Default: false

允许向上缩放(默认:false)

5.0

playButton

true or false

Determines whether a preview image and a play button should be rendered in place of the applet. Pushing the play button initializes the applet. Default: false

显示播放按钮 显示预览图和播放按钮代替应用 点击播放按钮初始化应用 默认:false

5.0

scale

number

Ratio by which the applet should be scaled (eg. 2 makes the applet 2 times bigger, including all texts and UI elements). Default: 1

缩放比例(如2表示放大2倍,包括所有文本和UI元素,默认:1)

5.0

showAnimationButton

true or false

Whether animation button should be visible

显示动画按钮

5.0

showFullscreenButton

true or false

Whether fullscreen button should be visible

显示全屏按钮

6.0

showSuggestionButtons

true or false

Whether suggestion buttons (special points, solve) in Algebra View should be visible

显示建议按钮(代数视图中的特殊点、求解等)

6.0

showStartTooltip

true or false

Whether "Welcome" tooltip should be shown

显示启动提示("欢迎"工具提示)

5.0

rounding

string

String composed of number of decimal places and flags — valid flags are "s" for significant digits and "r" for rational numbers. Hence "10" means 10 decimal places, "10s" stands for 10 significant digits

舍入设置 数字+标志:"s"表示有效数字,"r"表示有理数 如"10":10位小数,"10s":10位有效数字

6.0

buttonShadows

true or false

Whether buttons should have shadow

按钮阴影

6.0

buttonRounding

Number (0 - 0.9)

Relative radius of button's rounded border. The border radius in pixels is buttonRounding * height /2, where height is the height of the button. Default 0.2

按钮圆角(0-0.9) 相对半径:圆角像素 = 值 × 按钮高度/2 默认:0.2

6.0

buttonBorderColor

Hex color (#RGB, #RGBA, #RRGGBB or #RRGGBBAA)

Border color of buttons on the graphics view. Default is black, if the button background is white, otherwise one shade darker than the background color

按钮边框颜色(十六进制) 默认:黑色(按钮背景为白色时)或比背景色深一阶

6.0

editorBackgroundColor

Hex color

Background color of the evaluator app

编辑器背景色(公式编辑器应用)

6.0

editorForegroundColor

Hex color

Foreground (text) color of the equation editor (appname = "evaluator")

编辑器前景色(公式编辑器文本颜色)

6.0

textmode

true or false

Whether editor is in text mode or not (appname = "evaluator") Default: false

文本模式(公式编辑器,默认:false)

6.0

showKeyboardOnFocus

false, true or auto

Whether to show keyboard when input is focused. When set to true, keyboard is always shown, for false it never appears, for auto it's shown unless closed by user. Default: true in evaluator app, auto in other apps

聚焦时显示键盘 true:总是显示 false:从不显示 auto:用户未关闭时显示 默认:公式编辑器为true,其他为auto

6.0

keyboardType

"scientific", "normal", "notes"

Which keyboard is shown for equation editor (appname = "evaluator")

键盘类型(公式编辑器) "scientific":科学键盘 "normal":普通键盘 "notes":笔记键盘

6.0

transparentGraphics

true or false

Whether the Graphics View and Graphics View 2 should be transparent

透明图形视图

6.0

disableJavaScript

true or false

Whether running JavaScript from material files is disabled or not

禁用JavaScript(禁用材料文件中的JS)

6.0

detachKeyboard

true, false or auto (default)

Whether the keyboard should be detached from the applet. When set to false, the keyboard is attached directly to the body of the document. When set to auto (or not set), the keyboard is attached to the applet if there are views other than the graphics view and attached to document body otherwise

分离键盘 false:键盘附加到文档body auto:有非图形视图时附加到应用,否则附加到body 默认:auto

6.0

detachedKeyboardParent

String

When set, the keyboard should be attached to the first element in DOM that fits the selector

分离键盘父元素(CSS选择器,键盘附加到匹配的第一个DOM元素)

6.0

4.参考文章

1.https://www.zywvvd.com/notes/tools/geogebra/geogebra-html-embed/geogebra-html-embed/

2.https://geogebra.github.io/docs/reference/en/Material_Embedding_(Iframe)/

3.https://geogebra.github.io/docs/reference/en/GeoGebra_Apps_Embedding/

0
  1. 支付宝打赏

    qrcode alipay
  2. 微信打赏

    qrcode weixin

评论区