我在React项目中使用iframe加载angular项目的页面,想要传一串用户信息,由于跨域,采用了HTML5的新方法postMessage()。
花了很多时间,就是传不过去消息,然后angular本地服务也会发一条message,导致我误以为消息是通的,但是消息体不正确,origin也不正确,
网上翻了个遍也没有找到解决方法,在一次不经意的尝试中,我使用了setTimeout,延时3s,我靠,成功了;
总结原因就是必须等到iframe页面完全加载完,消息才能发送成功,我也尝试监听iframe的onload函数,但是始终不会执行。
注:纠正以上 “监听iframe的onload函数,但是始终不会执行”,必须获取到iframe元素进行监听,会成功的。
let iframe = document.getElementById('inp-oldAdmissionAssess-iframe');
iframe.onload = () => {
this.iframe = window.frames['inp-oldAdmissionAssess-iframe'];
this.iframe.postMessage(JSON.stringify(option), URL);
console.log(iframe)
}
2020-10-29更新:
js:
iframeLoad = (e) => {
const { userMessage } = this.state;
let option = {
id: 'init',
data: {
userMessage
},
origin: location.origin
};
e.target.contentWindow.postMessage(option, URL);//向iframe里传信息
}
html:
<iframe
name={ID}
id={ID}
onLoad={this.iframeLoad}
src={_src}
width="100%"
height="100%"
frameBorder={0}
scrolling="auto">
</iframe>