這篇文章將為大家詳細(xì)講解有關(guān)使用postMessage怎么解決iframe跨域通信，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。

成都創(chuàng)新互聯(lián)公司服務(wù)項目包括東河網(wǎng)站建設(shè)、東河網(wǎng)站制作、東河網(wǎng)頁制作以及東河網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，東河網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到東河省份的部分城市，未來相信會繼續(xù)擴大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

首先我們模擬場景，假設(shè)有兩個不同源的頁面，iframePage.html是index.html的子頁面：

  
this is index

  

  
this is iframePage

現(xiàn)在這兩個iframe是無法通信，因為它們是不同源的（假設(shè)存在跨域問題），這時候就要用到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方法，相當(dāng)于給子頁面發(fā)送了一條消息。

postMessage方法第一個參數(shù)是要發(fā)送的數(shù)據(jù)，可以是任何原始類型的數(shù)據(jù)。

Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3)之前，第一個參數(shù)必須是一個字符串。

postMessage方法第二個參數(shù)可以設(shè)置要發(fā)送到哪個url，如果當(dāng)前子頁面的url和設(shè)置的不一致，則會發(fā)送失敗，我們設(shè)置為*，代表所有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事件，并且設(shè)置好回調(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為一個對象：

關(guān)于使用postMessage怎么解決iframe跨域通信就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

當(dāng)前題目：使用postMessage怎么解決iframe跨域通信-創(chuàng)新互聯(lián)
本文網(wǎng)址：http://weahome.cn/article/dciede.html