我们公司的很多项目都是门户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就可以了