0.0.24 • Published 4 years ago
@amoy/webridge v0.0.24
Webridge
使用方式
容器方
import { webridge } from '@amoy/webridge'
// 打开一个页面
// @ url: 需要打开的页面地址
// @ data: 传递给新开页面的数据
// @ config: 配置 iframe
webridge.open(url: string, data: any, config: {
// iframe 宽度
width?: number
// 高度
height?: number
// 坐标
x?: number
y?: number
// 背景颜色
backgroundColor?: string | number
// 是否自动显示
autoShow?: boolean
// 加载完成
onload?: (ifr: HTMLIFrameElement) => void
})
// 预加载页面
// 会提前在后台创建一个 iframe 并缓存
// 参数与 open 一致
webridge.preload(url: string, data, config)
// 关闭指定 iframe
// @refresh: 是否彻底关闭 iframe,用于适配不同场景
// true: 彻底关闭,下次 open 需重新加载;
// false: 保持状态隐藏,下次 open 会直接显示;
webridge.close(iframe: HTMLIFrameElement, refresh: boolean)
// 事件机制,可用于父子级 双向交互
webridge.on(evName: string, callback: (...data: any) => any)
webridge.emit(evName: string, data: any)
页面方
页面方同样可调用容器方 API, 例如 on / emit / open;
import { webridge } from '@amoy/webridge'
// 兼容性生命周期
// - 当在容器中, 则 当页面显示时被调用,ready 外的代码会再显示前被执行;
// - 当不在容器中, 则在 DOMContentLoad 时触发
//
// @ data: 容器 open 时传递的数据
webridge.pageReady(cbk: (...data: any) => void)
webridge.pageShow(cbk: (...data: any) => void)
// 加载完成, 调用后会触发 pageReady
// 配合父级 open 时 autoShow: false 时使用
webridge.loaded(show: boolean = true)
// 当 show = false 时,pageReady 会被触发,但页面不会展示
// 显示页面
webridge.show()
// 关闭自身页面,回到容器页面
// @refresh: 是否彻底关闭 iframe,用于适配不同场景
// true: 彻底关闭,下次 open 需重新加载;
// false: 保持状态隐藏,下次 open 会直接显示;
webridge.close(refresh?: boolean)
0.0.24
4 years ago
0.0.21
4 years ago
0.0.22
4 years ago
0.0.23
4 years ago
0.0.20
4 years ago
0.0.19
4 years ago
0.0.18
4 years ago
0.0.16
4 years ago
0.0.17
4 years ago
0.0.15
4 years ago
0.0.14
4 years ago
0.0.12
4 years ago
0.0.11
4 years ago
0.0.10
4 years ago
0.0.9
4 years ago
0.0.8
4 years ago
0.0.7
4 years ago
0.0.6
4 years ago
0.0.5
4 years ago
0.0.3
4 years ago
0.0.2
4 years ago
0.0.1
4 years ago