使用postMessage 实现React和iframe通信

2019-07-04 10:54:45 阅读：1278 来源： 互联网

标签：postMessage react React window iframe data event

最近项目里需要用到第三方的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多次渲染的问题后面再找时间研究

标签：postMessage,react,React,window,iframe,data,event
来源： https://blog.csdn.net/ZHANGLIZ/article/details/94595168

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

使用postMessage 实现React和iframe通信