最近公司項目內(nèi)通過iframe引入了另一個項目的內(nèi)容耘柱，子域和父域不屬于同域腔长，但需要將父域token傳入子域供子域的http請求使用葡缰，若子域內(nèi)的請求判斷該token已過期淆衷，需要子域調(diào)起父域退出登錄缸榄。
問題就卡在跨域通信這個關(guān)鍵點上。
萬能的度娘里搜到n種方法祝拯，選擇下列一種測試甚带，效果很不錯，已經(jīng)順利完成了上述需求佳头。
postMessage方法發(fā)送數(shù)據(jù)欲低，監(jiān)聽message事件獲取數(shù)據(jù)
父域部分
export default class ParentComponent extends React.Component {
componentDidMount() {
window.onmessage = e => {
//監(jiān)聽message事件
if (e.data === 'login') {
//根據(jù)子域傳送來的數(shù)據(jù) 執(zhí)行指定操作，傳送來的數(shù)據(jù)在data中
}
};
}
sendToken = () => {
//必須是iframe加載完成后才可以向子域發(fā)送數(shù)據(jù)
const childFrameObj = document.getElementById('calculation');
childFrameObj.contentWindow.postMessage('要發(fā)送的數(shù)據(jù)畜晰，必須是字符串', '*');
};
render() {
return (
<div >
<iframe
id="calculation"
src=“”
onLoad={this.sendToken}
/>
</div>
);
}
}
子域部分
window.parent.postMessage('需要傳送的數(shù)據(jù)，必須是字符串', '*'); //向父域傳送數(shù)據(jù)
export default class ChildComponent extends React.Component {
componentDidMount() {
// 首次打開時需要監(jiān)聽message事件瑞筐，接收父域傳送來的數(shù)據(jù)
//以我的項目里接收token舉例
if (sessionStorage.token) {
//若子域內(nèi)已存在token則不再需要監(jiān)聽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>
);
}
}
