詳解使用postMessage解決iframe跨域通信問題

2024-09-05 07:23:06

字體：大中小

來源：轉載

供稿：網友

這周碰到一個讓人頭疼的需求：要在我的web項目中嵌入另一個第三方web項目。第一時間想到的就是用iframe了，但問題來了，我和第三方web項目是有交互的，這就違反同源策略了，處理跨域問題是最讓人頭疼的事之一。

需求是這樣的，在我的頁面點擊一些按鈕，要實時反饋到iframe子頁面，子頁面再進行響應。

當時腦子里第一時間想到的解決方案是：用NGINX把兩個項目代理到同一域名下。但這樣似乎有點小題大做了，有沒有更方便快捷的方法呢？

在window對象下有個postMessage方法，是專門用來解決跨域通信問題的。

關于postMessage的詳細介紹請戳這里，不過MDN的文檔太詳細了，導致有些同學看完還是一臉懵逼，下面我們就來看看怎么用postMessage實現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>

現在這兩個iframe是無法通信，因為它們是不同源的（假設存在跨域問題），這時候就要用到postMessage了。

我們先試著從父頁面向子頁面發送一條消息：

// idnex.html//獲取iframe元素iFrame = document.getElementById('myframe')//iframe加載完畢后再發送消息，否則子頁面接收不到messageiFrame.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為一個對象：