#<frame>

A page element similar to HTML's <iframe>, which can embed a Lynx page into the current page.

#Usage Guide

The following is an example of a main page loading an embedded page via the <frame> element.

• The main page passes initData and globalProps to the embedded page through the data and global-props attributes.
• The main page listens for the embedded page loading status via the bindload event, and can use bindloadmetrics to receive loading metrics.

#Main Page

framesrc/frame/index.tsx

Code

Preview

#Embedded Page

framesrc/in_frame/index.tsx

Code

Preview

#Attributes

#auto-height

// @defaultValue: false
'auto-height'?: boolean;

Lets the frame height follow the embedded Lynx page’s content height. When enabled, the embedded page can report its content size, and the frame uses that value as its measured height.

#auto-width

// @defaultValue: false
'auto-width'?: boolean;

Lets the frame width follow the embedded Lynx page’s content width. When enabled, the embedded page can report its content size, and the frame uses that value as its measured width.

#data

data?: Record<string, unknown>;

Passes data to the nested Lynx page within the frame.

#enable-multi-async-thread

// @defaultValue: false
'enable-multi-async-thread'?: boolean;

Overrides whether the embedded Lynx page uses multiple asynchronous threads. When omitted, the frame inherits the host setting.

#global-props

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

Passes globalProps to the Lynx page embedded in the frame. The embedded page can read it via lynx.__globalProps .

#preset-height

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

Sets the preset height used before the embedded Lynx page receives an initialized content rect.

#preset-width

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

Sets the preset width used before the embedded Lynx page receives an initialized content rect.

#src

src: string;

Sets the loading path for the frame resource.

#Events

Frontend can bind corresponding event callbacks to listen for runtime behaviors of the element, as shown below.

#bindload

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

Bind frame load event callback.

#bindloadmetrics

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

Bind frame load metrics event callback.

#Compatibility