iframe 嵌入 (Iframe Embedder)
iframe 嵌入 内容类型允许您在内容中嵌入外部网页、应用程序或其他在线资源。通过iframe技术，您可以将第三方内容无缝集成到您的学习材料中，提供更丰富的学习体验。
本教程目标
- 掌握 iframe 嵌入 的适用场景和技术特性
- 学习创建 iframe 嵌入 内容的完整操作流程
- 了解如何配置嵌入参数和安全选项
第一次使用课灵？
请先注册并登录课灵账号(可以使用微信登录)，在工作区点击"创建"，并选择『iframe 嵌入 (Iframe Embedder)』开始创作。
何时使用 iframe 嵌入
- 外部资源集成：嵌入在线工具、计算器或交互式应用
- 多媒体内容：嵌入视频平台、音频播放器或地图服务
- 数据可视化：嵌入图表、报表或实时数据展示
- 第三方服务：嵌入表单、调查或其他在线服务
教程示例
下面是我们将在本教程中创建的 iframe 嵌入 示例，用于嵌入仿真练习：密度。
iframe 嵌入 示例：密度仿真
快速复制示例
- 点击 这里➜ 将示例复制到你的课灵工作区
- 在打开的页面点击"复制" (注意：请确保已登录课灵账号，否则无法复制)
- 随后在生成的副本中点击"编辑"
- 即可查看并操作本教程所示的设置。
创建 iframe 嵌入 ：分步指南
步骤 1：创建新内容
- 在课灵工作区点击"创建"，进入 H5P 编辑器
- 在内容类型列表中选择 『iframe 嵌入』 或搜索
Iframe Embedder - 进入编辑界面开始配置
从 H5P 内容类型列表中选择『iframe 嵌入』
步骤 2：设置标题和显示参数
在 『标题』 字段中输入：仿真模拟: 密度
配置iframe的显示参数：
- 宽度：
500px（可根据需要调整） - 最小宽度：
400px - 高度：
300px
配置 iframe 嵌入 的标题和显示参数
步骤 3：配置嵌入源
在 『源地址』 字段中输入地图嵌入URL：
https://obs.klhubs.com/phet/density_zh_CN.html
配置 iframe 嵌入 的嵌入源URL
步骤 4：配置其他选项
勾选『支持调整大小』 以允许用户根据需要调整iframe的大小并显示全屏按钮。
配置 iframe 嵌入 的支持调整大小选项
步骤 5：保存与预览
点击 『保存并关闭』 生成完整的示例内容。您现在应该有一个与本教程顶部示例类似的结果。
专家提示：用例灵感与相关内容类型推荐
想拓展『iframe 嵌入』的使用场景？以下是一些常见用例，帮助你打开创作思路：
- 在线工具集成：嵌入计算器、转换器或编辑器
- 数据可视化：嵌入实时图表和报表
- 社交媒体内容：嵌入推文、帖子或视频
- 第三方服务：嵌入预订系统或客服聊天
- 虚拟实验室：嵌入科学模拟和实验工具