#<frame>

一个类似 HTML <iframe> 的页面元素，可以将一个 Lynx 页面迁入当前页面中。

#使用指南

以下为主页面通过 <frame> 元素加载 frame 内嵌页面的示例

• 主页面通过 data、global-props 属性向内嵌页面传递 initData、globalProps 数据
• 主页面通过 bindload 事件监听内嵌页面加载情况，也可以通过 bindloadmetrics 获取加载指标

#主页面

framesrc/frame/index.tsx

Code

预览

#frame 内嵌页面

framesrc/in_frame/index.tsx

Code

预览

#属性

#auto-height

// @默认值: false
'auto-height'?: boolean;

使框架高度跟随嵌入的 Lynx 页面的内容高度。启用此功能后，嵌入的页面可以报告其内容大小，框架会将该值用作其测量高度。

#auto-width

// @默认值: false
'auto-width'?: boolean;

使框架宽度跟随嵌入的 Lynx 页面的内容宽度。启用此功能后，嵌入的页面可以报告其内容大小，框架会将该值用作其测量宽度。

#data

data?: Record<string, unknown>;

将数据传递给框架内嵌套的 Lynx 页面。

#enable-multi-async-thread

// @默认值: false
'enable-multi-async-thread'?: boolean;

覆盖内嵌 Lynx 页面是否使用多个异步线程。未设置时，frame 会继承宿主页面的配置。

#global-props

'global-props'?: Record<string, unknown>;

将 globalProps 传递给框架中嵌入的 Lynx 页面。嵌入的页面可以通过 lynx.__globalProps 读取它。

#preset-height

'preset-height'?: `${number}px` | `${number}rpx`;

设置内嵌 Lynx 页面收到初始化内容区域前使用的预设高度。

#preset-width

'preset-width'?: `${number}px` | `${number}rpx`;

设置内嵌 Lynx 页面收到初始化内容区域前使用的预设宽度。

#src

src: string;

设置框架资源的加载路径。

#事件

前端可以绑定相应的事件回调来监听元素的运行时行为，如下所示。

#bindload

bindload = (e: FrameLoadEvent) => {};

绑定框架加载事件回调。

#bindloadmetrics

bindloadmetrics = (e: FrameLoadMetricsEvent) => {};

绑定 frame 加载指标事件回调。

#兼容性