USC frame message

install

//yarn 
yarn add usc-frame-message
//or npm
npm install usc-frame-message

1.parent 父页面代码

//html
<button id="send">send</button>
<iframe src="./recive.html" id="frame"></iframe>

//js
import { UscFrameMeetingApi, UscFrameMessageEvent } from "usc-frame-message"
let api = undefined

document.getElementById("frame").onload = async function () {
    if (api === undefined) {
        //在iframe加载之后执行，这里的this指的是iframe元素
        api = new UscFrameMeetingApi(this["contentWindow"]);//this is point to the  iframe element
        //注册相关监听事件用来获取子页面上报的消息
        api.on(UscFrameMessageEvent.userLeave, (data) => {
            console.log("recive pop message:", data)
        })
    }
    //向子页面发送消息并且接收返回结果，这里采用的是异步的方式
    let result = await api.addMember("zhangsan", "6047")
    console.log("result", result)
}

2.subpage 子页面代码

//js
import { IframeMessageReciver, IframeMessageType, UscFrameMessageEvent } from "usc-frame-message"

let reciver = new IframeMessageReciver()
//注册处理函数，处理父页面发送的addMember的请求
reciver.registerMesssageProcess(IframeMessageType.addMember, (data) => {
    console.log("recive", data)
    //这里的结果将作为父页面调用接口的异步回调返回
    return { success: true, message: "hello" }
})

//主动给父页面推送一条消息
reciver.popMessage(UscFrameMessageEvent.userLeave, "6047")