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 )  
```

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值