iframe之间传递数据笔记

我们公司的很多项目都是门户iframe内嵌子系统的形式,有时候会需要门户给子系统传递数据,或者子系统给门户传递数据的情况。

传递数据 我使用的是H5的postMessage

简单说一下postMessage的用法

window.postMessage({name:'lisa'},'*')  发布消息 传递数据name

window.addEventListener('message',(res)=>{//监听数据

    console.log(res.data.name)

})

以上讲的比较简单,要想具体学习,自行研究。

先说下比较简单的,子系统给门户传递数据是比较简单的(以下场景是iframe内外层都在一个项目中的不同组件)

window.parent.postMessage({name:'lisa'},'*')  //内层发布消息

window.addEventListener('message',(res)=>{})//外层接收消息

外层给内层传递数据,且外层是门户项目,内层是子系统

门户菜单待办事项菜单有代办数量的展示,是调接口获取的(每30秒获取一次)

代办事项页面是各种业务类型的tab展示,每种业务类型也要加代办数量。如果内外层都是分别每30秒调接口获取,会出现变化不同步的情况。因为两个系统可能调接口的时间不一致

所以一种方式就是 门户获取到代办数量的数据后通过postMessage传递给子系统。

门户postMessage

这里门户要找到iframe.contentWindow然后postMessage;

angular是通过viewChild获取到iframe

iframe.nativeElement.contentWindow.postMessage

子系统接收

window.addEventListener('message',(res)=>{})

这里有个坑就是,如果你打开多个菜单,也就是多个tab页,那通过viewChild获取到的iframe就是个数组,这个时候postMessage,子系统是获取不到数据的

解决办法有很多,我是只有待办事项一个tab页需要接收数据,在门户加了代码控制,只给代办事项的iframe加#iframeObj,这样通过viewChild获取到的就是待办事项的iframe

如果你的系统需要给每个菜单都传递数据,你遍历获取到的iframe,然后postMessage就可以了

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值