需求说明
B页面需要拿到A页面的信息，这两个页面在不同的域名下，使用localStorage不能跨域，所以采用iframe的postMessage实现不同源通信
// A页面
export default class Hot extends React.Component {
handerClick() {
window.frames[0].postMessage('主页面消息', '*');
}
render() {
return (
<div>
<iframe src="http://localhost:8080/#/login" id="child" />
<button onClick={() => { this.handerClick(); }} >click</button>
</div>
);
}
}
// B页面
window.addEventListener('message', function (e) {
console.log(e.data) //e.data为传递过来的数据
console.log(e.origin) //e.origin为调用 postMessage 时消息发送方窗口的 origin（域名、协议和端口）
console.log(e.source) //e.source为对发送消息的窗口对象的引用，可以使用此来在具有不同origin的两个窗口之间建立双向通信
})
可以看到打印出来的结果
注意：
- 一定是页面加载完成后在发送消息，否则会因为 iframe 未加载完成报错。
- 在react中即使是写在componentDidMount中也拿不到data
参考文献：
