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