组件：Iframe面板

Iframe面板组件用于在页面中嵌入另一个网页，以独立窗口的形式展示外部内容。它支持设置地址、尺寸、边框等属性，并提供了内容加载完毕的回调事件。常用于嵌入第三方页面、独立子页面、外部系统等场景。注意： 嵌入跨域页面时，受浏览器同源策略限制，部分操作（如通信）可能受限。

典型使用场景：

  • 嵌入第三方服务页面（如地图、支付、客服系统）
  • 展示独立子页面（如帮助文档、用户协议）
  • 集成外部系统（如报表系统、监控面板）
  • 页面预览（如链接预览、模板预览）

📌 继承自视图的成员速查

本组件继承自 视图 类，可直接使用以下属性和方法：

属性： ID、左边、顶边、右边、底边、宽度、高度、背景、背景颜色、背景图像、文本、文本颜色、字体、字体大小、字体粗细、行高、边框、边框圆角、边框宽度、光标样式、显示模式、透明度、外边距、外边距底、外边距左、外边距右、外边距顶、最大高度、最大宽度、最小高度、最小宽度、内边距、内边距底、内边距左、内边距右、内边距顶、定位、CLASS、InnerHTML、OuterHTML、内容水平对齐方式、首行缩进、可视、显示层级、内联样式、禁用

方法： 追加内联样式(样式文本)、置内联样式(名称,值)、取内联样式值(名称)、取Style对象()、添加事件(事件名称, 回调函数)、删除事件(事件名称, 回调函数)、获取焦点()、清除焦点()、添加样式类(类名称)、移除样式类(类名称)、取样式类列表()、取样式类()、执行单击()、取属性值(属性名)、取属性节点(属性名)、取布局参数()、取渲染宽度()、取渲染高度()、取渲染顶边()、取渲染左边()、左侧对齐到(目标组件,偏移量)、右侧对齐到(目标组件,偏移量)、顶边对齐到(目标组件,偏移量)、底边对齐到(目标组件,偏移量)、右侧对齐到左(目标组件, 偏移量)、左侧对齐到右(目标组件, 偏移量)、底边对齐到顶(目标组件, 偏移量)、顶边对齐到底(目标组件, 偏移量)、有指定属性(属性名)、有属性()、内容可编辑()、包含CSS类(类名)、取命名空间()、取下个节点()、取下个元素()、取节点名称()、取节点类型()、取父节点()、取父元素()、取上个节点()、取上个元素()、销毁()、删除属性(属性名)、删除属性节点(属性名)、置属性值(属性名, 属性值)、置属性节点(属性节点)、取标签名()、移动(左边 顶边, 宽度, 高度)、取原生对象()、置被单击回调(回调函数)、置被双击回调(回调函数)、置鼠标被进入回调(回调函数)、置鼠标被移出回调(回调函数)、置鼠标被移动回调(回调函数)、置鼠标被按下回调(回调函数)、置鼠标被抬起回调(回调函数)、置鼠标滚轮被滚动回调(回调函数)、置键盘被按下回调(回调函数)、置按键被抬起回调(回调函数)、置按键被压下回调(回调函数)、置被失去焦点回调(回调函数)、置被获得焦点回调(回调函数)

事件： 被单击(源对象,事件源)、被双击(源对象,事件源)、鼠标被进入(源对象,事件源)、鼠标被移出(源对象,事件源)、鼠标被移动(源对象,事件源)、鼠标被按下(源对象,事件源)、鼠标被抬起(源对象,事件源)、鼠标滚轮被滚动(源对象,事件源)、键盘被按下(源对象,事件源)、按键被抬起(源对象,事件源)、按键被压下(源对象,事件源)、被失去焦点(源对象,事件源)、被获得焦点(源对象,事件源)

💡 完整成员列表及详细说明请参考：视图 类

常用操作速查

操作属性/方法示例
设置嵌入的页面地址地址Iframe面板1.地址 = "https://example.com"
设置面板尺寸宽度 / 高度Iframe面板1.宽度 = 800，Iframe面板1.高度 = 600
设置边框样式边框 / 边框圆角Iframe面板1.边框 = "1px solid #d9d9d9"，Iframe面板1.边框圆角 = "8px"
设置加载完毕回调置内容加载完毕回调(回调函数)Iframe面板1.置内容加载完毕回调((源对象) => { ... })
向父页面发送数据发送数据(内容, 目标域名)Iframe面板1.发送数据("hello", "https://parent.com")
获取子页面对象取面板内容对象()变量 子窗口 = Iframe面板1.取面板内容对象()
设置背景色（加载时显示）背景颜色Iframe面板1.背景颜色 = "#f5f5f5"

样式美化参考

Iframe面板的外观可通过继承的视图属性进行调整：

边框与圆角：

  • 有边框：边框 = "1px solid #d9d9d9"，边框圆角 = "8px"
  • 无边框：边框 = "none"，适合全屏嵌入场景
  • 圆角面板：边框圆角 = "12px"，溢出隐藏 = "hidden"

尺寸与背景：

  • 固定尺寸：宽度 = 800，高度 = 600
  • 自适应：宽度 = "100%"，高度 = "100%"
  • 加载背景：背景颜色 = "#f5f5f5"（页面加载时显示）

常用样式组合：

' 带阴影的卡片样式
Iframe面板1.边框 = "1px solid #e8e8e8"
Iframe面板1.边框圆角 = "8px"
Iframe面板1.背景颜色 = "#ffffff"
Iframe面板1.追加内联样式("box-shadow: 0 2px 8px rgba(0,0,0,0.1);")

基础示例

创建一个基本的Iframe面板，嵌入一个外部网页。

变量 Iframe面板1 = 创建 Iframe面板()
Iframe面板1.左边 = 50
Iframe面板1.顶边 = 50
Iframe面板1.宽度 = 800
Iframe面板1.高度 = 500
Iframe面板1.地址 = "https://www.example.com"
Iframe面板1.边框 = "1px solid #d9d9d9"
Iframe面板1.边框圆角 = "8px"
Iframe面板1.背景颜色 = "#f5f5f5"

Iframe面板1.置内容加载完毕回调((源对象) => {
    调试输出("页面加载完成")
    弹出提示("内容已加载")
})

添加组件(Iframe面板1)

综合示例：嵌入地图服务

本示例展示如何使用Iframe面板嵌入在线地图（如高德地图），并演示加载状态反馈。

' ========== 创建标题 ==========
变量 标题 = 创建 标签()
标题.左边 = 30
标题.顶边 = 30
标题.文本 = "📍 位置地图"
标题.字体大小 = "20px"
标题.字体粗细 = "bold"
添加组件(标题)

' ========== 创建加载状态标签 ==========
变量 状态标签 = 创建 标签()
状态标签.左边 = 30
状态标签.顶边 = 70
状态标签.文本 = "⏳ 加载中..."
状态标签.字体大小 = "14px"
状态标签.文本颜色 = "#999"
添加组件(状态标签)

' ========== 创建Iframe面板 ==========
变量 地图面板 = 创建 Iframe面板()
地图面板.左边 = 30
地图面板.顶边 = 100
地图面板.宽度 = 800
地图面板.高度 = 500
地图面板.边框 = "1px solid #e8e8e8"
地图面板.边框圆角 = "12px"
地图面板.溢出隐藏 = "hidden"

' 高德地图嵌入示例（需替换为自己的key）
地图面板.地址 = "https://uri.amap.com/marker?position=116.397428,39.90923&name=北京"

' 加载完成回调
地图面板.置内容加载完毕回调((源对象) => {
    状态标签.文本 = "✅ 地图加载完成"
    状态标签.文本颜色 = "#52c41a"
    调试输出("地图加载完成")
})

' 添加加载超时处理（延时5秒后仍显示加载中，提示用户检查网络）
变量 超时时钟 = 创建时钟(() => {
    如果(状态标签.文本 == "⏳ 加载中...")
        状态标签.文本 = "⚠️ 加载超时，请检查网络"
        状态标签.文本颜色 = "#ff4d4f"
    结束 如果
    销毁时钟(超时时钟)
}, 5000)

添加组件(地图面板)

属性详解

地址

  • 类型： 文本型
  • 说明： 设置或获取Iframe中加载的页面URL地址。支持绝对路径和相对路径。当设置此属性时，Iframe会自动加载该地址。

函数详解

发送数据(内容, 目标域名)

  • 功能： 向Iframe的父页面发送数据（通过 postMessage API）。通常用于子页面与父页面之间的跨文档通信。
  • 参数：
    • 内容：文本型，要发送的数据。
    • 目标域名：文本型，指定接收消息的父页面域名（如 "https://parent.com"），用于安全限制。可设为 "*" 表示不限制（不推荐）。
  • 返回值： 无。
  • 示例： Iframe面板1.发送数据("刷新", "https://example.com")

取面板内容对象()

  • 功能： 获取Iframe的 contentWindow 对象，可通过该对象调用子页面中的 JavaScript 函数或访问子页面的变量。注意： 仅当子页面与父页面同源时，才能访问子页面的完整内容。
  • 返回值： contentWindow 对象（原生）。
  • 示例： 
    变量 子窗口 = Iframe面板1.取面板内容对象()
如果(子窗口 != 空)
    ' 调用子页面中的函数（需同源）
    子窗口.someFunction()
结束 如果

置内容加载完毕回调(回调函数)

  • 功能： 设置当Iframe内容加载完成时的回调函数。
  • 参数： 回调函数，格式为 (源对象) => { ... }，源对象 为Iframe面板组件本身。
  • 返回值： 无。
  • 示例： 
    Iframe面板1.置内容加载完毕回调((源对象) => {
    调试输出("加载完成")
})

事件说明

内容加载完毕(源对象)

  • 功能： 与 置内容加载完毕回调 等效，适用于设计文件（.spldg）中定义的组件。
  • 示例： 
    事件 Iframe面板1.内容加载完毕(源对象)
    调试输出("Iframe内容加载完成")
结束 事件

⚠️ 注意事项

  1. 跨域限制：当Iframe加载的页面与父页面不同源时，浏览器会阻止父页面访问子页面的DOM内容（如 取面板内容对象 的返回值受限），但 发送数据 和 置内容加载完毕回调 仍然可用。
  2. 内容加载完毕的触发时机：该事件在Iframe的 onload 事件触发时调用，表示所有资源（包括样式、图片、脚本）加载完成，可能需要较长时间。
  3. 地址格式：地址 支持绝对路径（如 https://example.com）和相对路径（如 /page.html）。若为相对路径，将相对于当前页面地址解析。
  4. 嵌套层级：Iframe面板可以嵌套多层，但过多的嵌套会影响性能和用户体验，建议不超过2层。
  5. 移动端适配：Iframe面板在移动端可能无法自适应，建议根据屏幕尺寸动态设置 宽度 和 高度，或使用百分比值。
  6. 安全策略：部分网站禁止通过Iframe嵌入（通过 X-Frame-Options 响应头），此时Iframe将显示空白或错误页面。可在加载失败时给出提示。
  7. 性能影响：每个Iframe都会独立加载一个完整的页面，会消耗额外的内存和网络资源，建议合理使用。
  8. 滚动条：Iframe内部的滚动条由子页面控制，若需隐藏滚动条，可在子页面中设置 body { overflow: hidden; }。
  9. URL参数传递：可通过 地址 的查询字符串（?key=value）向子页面传递参数。
  10. 与 加载URL 的区别：加载URL 是对话框组件的方法，用于在对话框中加载页面；而Iframe面板是独立的可视组件，直接嵌入页面布局中。

相关文档

  • 文档框架基础类_视图 —— 视图类提供的所有通用属性和方法
  • 文档布局类组件_绝对布局 —— 配合定位Iframe
  • 文档布局类组件_弹性布局 —— 配合布局Iframe
  • 文档轻语言网站：轻语言语法速查 —— 拉姆达表达式、事件处理等
  • 文档综合演示：嵌入地图 —— 实际应用示例