使用 postMessage 解決 iframe 跨域通信問題
https://blog.csdn.net/erdfty/article/details/86518879
這周碰到一個讓人頭疼的需求：要在我的web項目中嵌入另一個第三方web項目。第一時間想到的就是用iframe了，但問題來了，我和第三方web項目是有交互的，這就違反同源策略了，處理跨域問題是最讓人頭疼的事之一。
需求是這樣的，在我的頁面點擊一些按鈕，要實時反饋到iframe子頁面，子頁面再進行響應。
當時腦子里第一時間想到的解決方案是：用NGINX把兩個項目代理到同一域名下。但這樣似乎有點小題大做了，有沒有更方便快捷的方法呢？
在window對象下有個postMessage方法，是專門用來解決跨域通信問題的。
關於postMessage的詳細介紹請戳這里，不過MDN的文檔太詳細了，導致有些同學看完還是一臉懵逼，下面我們就來看看怎么用postMessage實現iframe跨域通信，當你會用了之后再回去看文檔，感覺是完全不同的。
首先我們模擬場景，假設有兩個不同源的頁面，iframePage.html是index.html的子頁面：
-
<!-- index.html -->
-
-
<body style="border:5px solid #333;">
-
-
<h1>this is index
</h1>
-
-
<iframe src="./iframePage.html" id='myframe'>
</iframe>
-
-
</body>
-
<!-- iframePage -->
-
-
<body style="border:5px solid #333;">
-
-
<h1>this is iframePage
</h1>
-
-
</body>
現在這兩個iframe是無法通信，因為它們是不同源的（假設存在跨域問題），這時候就要用到postMessage了。
我們先試着從父頁面向子頁面發送一條消息：
-
// idnex.html
-
-
//獲取iframe元素
-
iFrame =
document.
getElementById(
'myframe')
-
-
//iframe加載完畢后再發送消息，否則子頁面接收不到message
-
iFrame.
onload =
function(
){
-
-
//iframe加載完立即發送一條消息
-
iFrame.
contentWindow.
postMessage(
'MessageFromIndex1',
'*');
-
-
}
我們知道postMessage是掛載在window對象上的，所以等iframe加載完畢后，用iFrame.contentWindow獲取到iframe的window對象，然后調用postMessage方法，相當於給子頁面發送了一條消息。
postMessage方法第一個參數是要發送的數據，可以是任何原始類型的數據。
Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3)之前，第一個參數必須是一個字符串。
postMessage方法第二個參數可以設置要發送到哪個url，如果當前子頁面的url和設置的不一致，則會發送失敗，我們設置為*，代表所有url都允許發送。
postMessage方法還有第三個參數，屬於高級用法，這里不做討論，可以稍后去MDN了解。
消息發送到iframePage.html，我們來接收message：
-
// iframePage.html
-
-
//回調函數
-
function
receiveMessageFromIndex ( event ) {
-
console.
log(
'receiveMessageFromIndex', event )
-
}
-
-
//監聽message事件
-
window.
addEventListener(
"message", receiveMessageFromIndex,
false);
我們只需要在子頁面監聽message事件，並且設置好回調函數即可，來看看打印出來的event：
event對象中的data屬性存放着我們從父頁面傳過來的數據，就這么簡單！
讓我們再試試從子頁面發送數據給父頁面：
-
// iframePage.html
-
-
//給父頁面發送消息，data為對象
-
parent.
postMessage( {
msg:
'MessageFromIframePage'},
'*');
父頁面接收數據：
-
//index.html
-
-
//回調函數
-
function
receiveMessageFromIframePage (event) {
-
console.
log(
'receiveMessageFromIframePage', event)
-
}
-
-
//監聽message事件
-
window.
addEventListener(
"message", receiveMessageFromIframePage,
false);
我看看到，的確可以傳輸不同的數據，此時data為一個對象：
大家自己把代碼clone下來運行試試看。