溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關使用postMessage怎么解決iframe跨域通信，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。
首先我們模擬場景，假設有兩個不同源的頁面，iframePage.html是index.html的子頁面：
<!-- index.html --> <body style="border:5px solid #333;"> <h2>this is index</h2> <iframe src="./iframePage.html" id='myframe'></iframe> </body>
<!-- iframePage --> <body style="border:5px solid #333;"> <h2>this is iframePage</h2> </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為一個對象：
關于使用postMessage怎么解決iframe跨域通信就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
