使用postMessage进行react和iframe的数据通信.md

将react的数据传递给iframe

1.首先在父组件(react文件)内引入iframe

<iframe 
    style={
   {border:0,width:"100%",height:"100%",}}
    src='/model.html'
    id='calculation'
    //onLoad={this.sendToken}
/>

2.然后在父组件(react文件)内的Button按钮上绑定点击事件

<Button type="primary" onClick={this.handleClick.bind(this)}>点我</Button>

3.继续在父组件(react文件)内编写handleClick方法,使用postMessage传递数据

handleClick = () =>{
    //必须是iframe加载完成后才可以向子域发送数据
    const childFrameObj = document.getElementById('calculation');
    childFrameObj.contentWindow.postMessage(1233, '*'); //window.postMessage
};

4.在iframe页面编写回掉函数并监听message事件

//回调函数
functio