在iframe内部通過window.open打開頁面使用postMessage通信造成跨域問題解決辦法

最近項目為了接入公司其他項目，使用了iframe，一般用到iframe，要通信我第一時間想到的就是postMessage，這次也不例外，

在iframe内部打開新頁面并發送消息

在xxx.com頁面監聽iframe内部發送消息，并回傳消息給iframe

//1.監聽postMessage
window.addEventListener('message', function (e) {
    // 處理消息
    }
}, false);
//通知外部,已經初始化完畢
window.postMessage({ready:true},'*');
           

在這裡回發資訊就要報錯，在iframe内部無法接受到回發的消息，是以這裡在監聽消息内部去做消息回發

xxx.com頁面監聽部分代碼做如下修改

window.addEventListener('message', function (e) {
    // 處理消息
    //通知外部,已經初始化完畢
    e.source.postMessage({ready:true},'*');
    }
}, false);
           

然後在iframe内部監聽消息，并關閉剛打開的tab頁面

window.addEventListener('message', function(e){
	// 處理消息
	// 關閉頁面
	opener.close()
},false)
           

此外還有一個問題，就是在iframe内部無法通過

window.top.location

去通路父級頁面的位址資訊，會産生跨域問題，要解決這個問題，可以指定通過查找iframe dom元素，比如

documnet.querySelector('iframe').contentWindow.postMessage('向iframe傳的值'，*)

或者把消息帶到iframe的位址欄上也可以，也可以繞過，在iframe内部讀取配置檔案達到通信的目的或者通過接口通信，方法有很多種，看自己的需求