Lynx
指引
API
博客
贡献
指引
API
博客
贡献
简体中文

<frame>

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

使用指南

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

  • 主页面通过 data,globalProps 属性值内嵌页面传递 initData,globalProps 数据
  • 主页面通过 bindload 事件监听内嵌页面加载情况

主页面

framesrc/frame/index.tsx
预览

frame 内嵌页面

framesrc/in_frame/index.tsx
预览
TIP

<frame> 元件于

3.4 引入，需要使用该元件的场景，需将依赖的 Lynx 版本升级至
3.4 及以上。

CAUTION

<frame> 暂不支持自动撑高，需要手动设置 frame 的宽高。

属性

data

Android
iOS
3.4 
data?: Record<string, unknown>;

向 frame 内嵌的 Lynx 页面传递数据。

global-props

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

向 frame 内嵌的 Lynx 页面传递 globalProps, 内嵌页面可以通过lynx.__globalProps 进行读取。

src

Android
iOS
3.4 
src: string;

设置 frame 资源的加载路径。

事件

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

bindload

Android
iOS
3.6 
bindload = (e: FrameLoadEvent) => {};
字段类型可选默认值平台起始版本描述
statusCodenumber否–
Android
iOS
3.6		3.6Frame 加载状态码。
statusMessagestring否–
Android
iOS
3.6		3.6Frame 加载状态信息。
urlstring否–
Android
iOS
3.6		3.6Frame 加载的 url。

绑定 frame 加载事件回调。

兼容性

LCD tables only load in the browser

除非另有说明，本项目采用知识共享署名 4.0 国际许可协议进行许可，代码示例采用 Apache License 2.0 许可协议进行许可。