react iframe 无法实时传数据

Question

场景描述：

首页有动态数据，例如websocket实时数据，需要传给子组件AlarmInfo，写法

<AlarmInfo data={this.state.alarmData}   />

子组件 AlarmInfo 用iframe引入一个html页面（初始化会绘制一张图，后面根据数据的变化修改图的内容），里面用js进行绘图等业务操作，现在要在这个html里接收到传递过来的data数据，却无法成功

我尝试在子组件里用postMessage给html页面传值，但是，无法接收到。写法：

AlarmInfo中：
render() {
   <iframe
        id="myframe"
        src={url}
        width="100%"
        height="100%"
        scrolling="no"
        frameBorder="0"
    />
}

传值：
document.getElementById("myframe").contentWindow.postMessage("ssss", "*")

html页面：
window.addEventListener("message", receiveMessage, false);
  function receiveMessage(event){
    console.log("我是iframe,我接收到了", event)
    console.log(event);
  }

怎么也不成功。是我思路不对还是哪里的问题？诚心求教。

Html页面和react页面 同一ip及端口。用的的umi2，和这个有关系吗？

Answer 1

首先你要理解 window.postMessage 的适用场景：跨域通信情况下用到。看你的场景描述是“同一ip及端口”，想必协议也是一致的，这就不存在跨域的问题。

目前他们是公用用一个 window 对象的，即：document.getElementById("myframe").contentWindow 与 html页面里的 window 是同一对象，你可以验证下：比如 document.getElementById("myframe").contentWindow.a = 1，看下html页面里 window.a 是否是 1。

最简单的解决方案：可以试试直接把数据源挂在 window 下。其他解决方案，要具体看项目技术栈或实际具体场景了。