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就可以了