使用postMessage 实现React和iframe通信

最近项目里需要用到第三方的html页面，框架用的是react ，直接用iframe引入的，并且两个之间要通信， 不太想在这个页面写大量业务代码，直接调接口也会存在跨域问题，发现HTML5新增了一个API window.postMessage()，决定用iframe结合window.postMessage()实现。

react页面：

	componentDidMount() {        // 监听message事件        window.addEventListener("message", this.receiveMessage, false);    }    componentWillUnmount() {        window.removeEventListener("message", this.receiveMessage)    }    receiveMessage =  ( event ) => {        console.log(event)        if(event!==undefined &&event.data && event.data.name){            console.log( '我是react,我接受到了来自iframe的数据：', event.data );        }    };    // 向iframe发送数据     handleClick = () => {        //必须是iframe加载完成后才可以向子域发送数据        const childFrameObj = document.getElementById('BlackHoleModel');    	childFrameObj.contentWindow.postMessage([684,685,686,687], '*');    };    render() {    	return (    		<Fragment>    				<Button onClick={this.handleClick.bind(this)}>向iframe发送数据</Button>                    <iframe id="Model" src={ModelUrl} title="引擎" />                </Fragment>     	)    }

ifame页面

js:

window.onload = function(event){   	//监听message事件 接收react传过来的参数	window.addEventListener("message", receiveMessageFromReact, false);   	//  自定义事件 --> 监听页面鼠标点击模型的操作	document.addEventListener("RealBIMSelModel", GetCurProbeRet);}// 接收react发送的数据function receiveMessageFromReact( event ) {  console.log( '我是iframe,我接收到了数据：', event.data );  window.reactData = event.data;};//向react发送数据function GetCurProbeRet(){  proberet = REgetCurProbeRet();  //获取当前选中点相关参数  console.log(proberet);  if (proberet.m_uSelActorSubID_L32) {    var data = {      name: '来自iframe的信息',      data: proberet    }    parent.postMessage(data,'*'); //window.postMessage  }

在react页面点击按钮控制台输出

在iframe里点击模型

但每次页面初始加载时候react 中的receiveMessage方法的console.log(event) 打印了很多次 当iframe执行GetCurProbeRet()方法才会向react发送数据的。

不知道是不是postMessage的机制还是react多次渲染的问题 后面再找时间研究

来源：https://www.icode9.com/content-4-297801.html