項目需求:
一個項目兩個域名其中a.com域名,嵌套了b.com域名
當進入b頁面的時候就要切換到b.com域名,同時需要保持在a域名下的登陸狀態
解決:使用ifram + postMessage
主頁面 a域名
a域名下要協商ifram 標籤
<iframe id="child" ref="iframBox" src="http://127.0.0.1:8082/#/mediation/liveRoom?partyids=680&id=334"></iframe>
a.com域名下面 ,點擊Button按鈕跳轉B頁面(b.com域名)
//點擊事件
videomediate () {
document.getElementById('child')
.contentWindow.postMessage({ meg: '這個是message', handleType: 'loginIfram', id: 666 },
"http://127.0.0.1:8082/#/mediation/liveRoom?partyids=680&id=334")
},
main.js
因為頁面跳轉先走main.js ,所以拿到消息我就先登錄一下
拿到消息的時候在進行頁面跳轉 這樣就可以在頁面重定向的時候解決跨域登陸問題
window.addEventListener('message', function (e) {
if (e.data.handleType == 'loginIfram') {
var newWindow = window.open(); //提前申明這樣防止直接打開網頁谷歌攔截問題
// 重新登錄一遍
login({
password: '123456',
username: '15056382531',
}).then(res => {
console.log('當前登陸成功');
newWindow.location.href = 'http://127.0.0.1:8082/#/mediation/liveRoom?partyids=680&id=334';
})
}
})