使用postMessage怎么解決iframe跨域通信-創(chuàng)新互聯(lián)

這篇文章將為大家詳細講解有關(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的子頁面：

<!-- 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>

現(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方法，相當于給子頁面發(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，如果當前子頁面的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：

使用postMessage怎么解決iframe跨域通信

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怎么解決iframe跨域通信

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

網(wǎng)站標題：使用postMessage怎么解決iframe跨域通信-創(chuàng)新互聯(lián)
URL網(wǎng)址：http://www.rwnh.cn/article14/dciede.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、網(wǎng)站內(nèi)鏈、網(wǎng)站營銷、Google、服務(wù)器托管、商城網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

内射老阿姨1区2区3区4区_久久精品人人做人人爽电影蜜月_久久国产精品亚洲77777_99精品又大又爽又粗少妇毛片

使用postMessage怎么解決iframe跨域通信-創(chuàng)新互聯(lián)