前端如何使得兩個項目之間通信，window.open + postMessage
一、背景
由于公司內部需求不斷加大，一個項目無法滿足，多個項目直接需滿足互相通信，則需要解決跨域傳遞消息的問題
二、兩個項目之間如何通信，如何解決解決跨域傳遞消息
1. A.html ( https://www.a.com )
<div @click="goDetail('參數id')">傳遞信息</div>
<script>
getMessage()
let timeOfmsg = null
function getMessage() {
// 接收消息
window.addEventListener('message', (e) => {
console.log('no 接收到數據')
if (e.data === 'getMsg') {
// @ts-ignore
console.log('接收到數據')
clearInterval(timeOfmsg)
}
})
}
// 跳轉到畫板編輯頁面
function goDetail(id) {
let url = 'https://www.b.com'
// 打開畫布
const targetWindow = window.open(`${url}?id=${id}`, '_blank')
// 發送消息
timeOfmsg.value = setInterval(() => {
console.log('已發送消息')
targetWindow.postMessage(localStorage.getItem('TOKEN'), url)
}, 1000)
}
</script>
2. B.html ( https://www.b.com )
<script>
window.addEventListener(
'message',
(event) => {
// 判斷接收信息的來源是否來自于 https://www.a.com
if (event.origin != 'https://www.a.com') return;
// 將接收到的數據存儲到本地
localStorage.setItem('TOKEN', event.data);
// 返回消息，告知已收到數據
event.source.postMessage('getMsg', event.origin);
},
false
);
</script>
三、坑點
1. onload （失敗）
window.open('xxx').onload = () => {
window.postMessage(message, targetOrigin, [transfer]);
}
2. setTimeout （失敗，由于B網站不一定什么時候加載完成）
setTimeout(() => window.postMessage(this.userSession, targetUrl), 3000);
3. setInterval（成功，A網站定時器不斷發送消息，當B網站接收到信息后，向A網站回復消息為已收到，關閉A網站的定時器）
let timeOfmsg = setInterval(() => {
winopen.postMessage(this.userSession, targetUrl);
}, 3000);
浙公網安備 33010602011771號