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)