最近公司项目内通过iframe引入了另一个项目的内容，子域和父域不属于同域，但需要将父域token传入子域供子域的http请求使用，若子域内的请求判断该token已过期，需要子域调起父域退出登录。
问题就卡在跨域通信这个关键点上。
万能的度娘里搜到n种方法，选择下列一种测试，效果很不错，已经顺利完成了上述需求。
postMessage方法发送数据，监听message事件获取数据
父域部分
export default class ParentComponent extends React.Component {
componentDidMount() {
window.onmessage = e => {
//监听message事件
if (e.data === 'login') {
//根据子域传送来的数据 执行指定操作，传送来的数据在data中
}
};
}
sendToken = () => {
//必须是iframe加载完成后才可以向子域发送数据
const childFrameObj = document.getElementById('calculation');
childFrameObj.contentWindow.postMessage('要发送的数据，必须是字符串', '*');
};
render() {
return (
<div >
<iframe
id="calculation"
src=“”
onLoad={this.sendToken}
/>
</div>
);
}
}
子域部分
window.parent.postMessage('需要传送的数据，必须是字符串', '*'); //向父域传送数据
export default class ChildComponent extends React.Component {
componentDidMount() {
// 首次打开时需要监听message事件，接收父域传送来的数据
//以我的项目里接收token举例
if (sessionStorage.token) {
//若子域内已存在token则不再需要监听message事件
//do something
window.onmessage = null;
return;
}
//若token不存在
window.onmessage = e => {
if (e.data) {
sessionStorage.token = e.data;
//do something
}
};
render() {
return (
<div >
xxxxxx
</div>
);
}
}
