iframe实现父子页面之间互相通信

安装 npm install @xksm/utils@latest

引入 import useUtils from "@xksm/utils"

父页面业务

创建 iframe 实例

// 以vue3使用为例
const WebIframeHooks = ref<any>(null)
WebIframeHooks.value = new useUtils.iframeInstance.WebIframeMainHooks(
        "iframeDOMID",
        "iframeUrl",
        {
            data:{}
        }
    )

发送数据到子页面

// data 需要发送到子页面的数据
// duration 延迟发送时间，默认200ms
WebIframeHooks.value.sendMessageToIframeFunc( data , duration )

接收子页面发送的数据

WebIframeHooks.value.updateMessageDataFunc( (data)=>{
    
} )

子页面业务

创建子页面 iframe 实例

const WebIframeSubHooks = ref<any>(null)
// url 父级页面地址
// duration 延迟发送时间，默认200ms
WebIframeSubHooks.value = new useUtils.iframeInstance.WebIframeSubHooks( url , duration )

接收父页面传递数据

cb回调函数，返回父页面传递的数据
WebIframeSubHooks.value.updateMessageDataFunc( (data)=>{

} )

发送数据到父页面

WebIframeSubHooks.value.sendMessageToParentFunc( data )