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

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

尼木網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)建站！從網(wǎng)頁設計、網(wǎng)站建設、微信開發(fā)、APP開發(fā)、成都響應式網(wǎng)站建設公司等網(wǎng)站項目制作，到程序開發(fā)，運營維護。創(chuàng)新互聯(lián)建站從2013年成立到現(xiàn)在10年的時間，我們擁有了豐富的建站經(jīng)驗和運維經(jīng)驗，來保證我們的工作的順利進行。專注于網(wǎng)站建設就選創(chuàng)新互聯(lián)建站。

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

  
this is index

  

  
this is iframePage

現(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怎么解決iframe跨域通信就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

網(wǎng)頁題目：使用postMessage怎么解決iframe跨域通信
本文鏈接：http://m.jiaotiyi.com/article/ppjgej.html