react iframe 无法实时传数据

kekexili
  • 1
新手上路,请多包涵

场景描述:

首页有动态数据,例如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,和这个有关系吗?

回复
阅读 326
1 个回答

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

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏