html跨域传值,iframe跨域传值踩坑

我在React项目中使用iframe加载angular项目的页面，想要传一串用户信息，由于跨域，采用了HTML5的新方法postMessage()。

花了很多时间，就是传不过去消息，然后angular本地服务也会发一条message，导致我误以为消息是通的，但是消息体不正确，origin也不正确，

误导我的那条消息

网上翻了个遍也没有找到解决方法，在一次不经意的尝试中，我使用了setTimeout，延时3s，我靠，成功了；

setInterval

总结原因就是必须等到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:

name={ID}

id={ID}

onLoad={this.iframeLoad}

src={_src}

width="100%"

height="100%"

frameBorder={0}

scrolling="auto">