简介

框架容器组件提供了一个基础的页面布局容器。支持自定义内容区域、页面状态管理、页面加载状态展示等特性，是构建页面布局的基础组件。适用于需要统一页面结构和状态管理的场景。

使用方法

局部引入，在需要引入的页面或组件的index.json中配置。

"usingComponents": {
  "fs-frame":"ava-ui/fxui/FsFrame/FsFrame"
}

代码演示

API

参数

| 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------- |---------- |------------- |-------- |-------- | | height | 高度 | string | — | '100%' | | autoHeight | 是否自动高度 | boolean | — | false | | srcdoc | iframe内容 | string | — | ''
| src | iframe地址 | string | — | "" | thirdH5 | 是否支持第三方H5页面 | boolean | true/false | false

Events

名称	参数	描述
onLoad	-	iframe加载完成时触发
onMessage	event	接收到iframe消息时触发
onResize	event	iframe尺寸变化时触发（thirdH5为true时支持）

iframe 标准用法

基础配置

当需要加载第三方 H5 页面时，建议设置 thirdH5 为 true，这样可以获得更好的兼容性和更完整的事件支持。

<iframe 
  src="https://example.com/page.html"
  thirdH5="{{true}}"
  bind:onLoad="handleLoad"
  bind:onMessage="handleMessage"
  bind:onResize="handleResize"
/>

注意事项

1. thirdH5 属性：当加载第三方 H5 页面时，务必设置 thirdH5="{{true}}"，以确保事件正常触发
2. 事件绑定：使用 bind: 前缀绑定事件，如 bind:onLoad、bind:onMessage、bind:onResize
3. 消息通信：通过 sendMessage 方法向 iframe 发送消息，通过 onMessage 事件接收消息
4. 尺寸适配：配合 onResize 事件可以实现内容自适应高度
5. 安全考虑：加载第三方页面时要注意验证消息来源和内容，避免安全风险

打开预览