詳解使用postMessage解決iframe跨域通信問題
我要評論這周碰到一個讓人頭疼的需求：要在我的web項目中嵌入另一個第三方web項目。第一時間想到的就是用iframe了，但問題來了，我和第三方web項目是有交互的，這就違反同源策略了，處理跨域問題是最讓人頭疼的事之一。
需求是這樣的，在我的頁面點擊一些按鈕，要實時反饋到iframe子頁面，子頁面再進行響應。
當時腦子里第一時間想到的解決方案是：用NGINX把兩個項目代理到同一域名下。但這樣似乎有點小題大做了，有沒有更方便快捷的方法呢？
在window對象下有個postMessage方法，是專門用來解決跨域通信問題的。
關于postMessage的詳細介紹請戳這里，不過MDN的文檔太詳細了，導致有些同學看完還是一臉懵逼，下面我們就來看看怎么用postMessage實現(xiàn)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>
現(xiàn)在這兩個iframe是無法通信，因為它們是不同源的（假設存在跨域問題），這時候就要用到postMessage了。
我們先試著從父頁面向子頁面發(fā)送一條消息：
// idnex.html
//獲取iframe元素
iFrame = document.getElementById('myframe')
//iframe加載完畢后再發(fā)送消息，否則子頁面接收不到message
iFrame.onload = function(){
//iframe加載完立即發(fā)送一條消息
iFrame.contentWindow.postMessage('MessageFromIndex1','*');
}
我們知道postMessage是掛載在window對象上的，所以等iframe加載完畢后，用iFrame.contentWindow獲取到iframe的window對象，然后調(diào)用postMessage方法，相當于給子頁面發(fā)送了一條消息。
postMessage方法第一個參數(shù)是要發(fā)送的數(shù)據(jù)，可以是任何原始類型的數(shù)據(jù)。
Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3)之前，第一個參數(shù)必須是一個字符串。
postMessage方法第二個參數(shù)可以設置要發(fā)送到哪個url，如果當前子頁面的url和設置的不一致，則會發(fā)送失敗，我們設置為*，代表所有url都允許發(fā)送。
postMessage方法還有第三個參數(shù)，屬于高級用法，這里不做討論，可以稍后去MDN了解。
消息發(fā)送到iframePage.html，我們來接收message：
// iframePage.html
//回調(diào)函數(shù)
function receiveMessageFromIndex ( event ) {
console.log( 'receiveMessageFromIndex', event )
}
//監(jiān)聽message事件
window.addEventListener("message", receiveMessageFromIndex, false);
我們只需要在子頁面監(jiān)聽message事件，并且設置好回調(diào)函數(shù)即可，來看看打印出來的event：
event對象中的data屬性存放著我們從父頁面?zhèn)鬟^來的數(shù)據(jù)，就這么簡單！
讓我們再試試從子頁面發(fā)送數(shù)據(jù)給父頁面：
// iframePage.html
//給父頁面發(fā)送消息，data為對象
parent.postMessage( {msg: 'MessageFromIframePage'}, '*');
父頁面接收數(shù)據(jù)：
//index.html
//回調(diào)函數(shù)
function receiveMessageFromIframePage (event) {
console.log('receiveMessageFromIframePage', event)
}
//監(jiān)聽message事件
window.addEventListener("message", receiveMessageFromIframePage, false);
我看看到，的確可以傳輸不同的數(shù)據(jù)，此時data為一個對象：
大家可以到postMessage-demo把代碼clone下來運行試試看。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
關于iframe跨域使用postMessage的實現(xiàn)
這篇文章主要介紹了關于iframe跨域使用postMessage的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一2019-10-29
使用postMessage讓 iframe自適應高度的方法示例
這篇文章主要介紹了使用postMessage讓 iframe自適應高度的方法示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著2019-10-08
