前端使用window.postMessage跨域數據交互的方法

這篇文章主要介紹“前端使用window.postMessage跨域數據交互的方法”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“前端使用window.postMessage跨域數據交互的方法”文章能幫助大家解決問題。

背景

在一個App內嵌的H5中，產品希望在頁面的下放設置一個區域，里面展示運營同學通過活動搭建平臺生成的教學頁面，頁面由運營同學自己搭建、替換，產品同學希望H5中能完整展示這個教學頁面的內容。

從業務需求上描述，就是一個H5（A頁面）內需要通過iframe加載另一個H5頁面（B頁面）。但是從技術角度來看就有以下幾點需要注意的地方：

• B頁面的高度不確定，B頁面由活動搭建平臺生成，至于展示的內容是什么、有多少并不知道。

• A頁面和B頁面是不同源的，因此無法直接通過iframe的contentWindow獲取到B頁面的尺寸。

解決方法

其實接合1、2點，核心就是需要在A頁面獲取到B頁面的高度，然后調整A頁面展示區域的高度，實現在A頁面完整展示B頁面的功能。

初步想法

這里我想到了使用window.postMessage去解決不同域下頁面通訊的問題。A頁面不能主動通過不同域的contentWindow獲取到B頁面的尺寸，那么，讓B頁面通過window.postMessage通知頁面A就好了，自己獲取自己的總能獲取到。

但是問題來了，B頁面不是確定的，是由運營通過搭建平臺生成的，也就是說，是沒辦法在B頁面通過代碼入侵的方式通知A頁面。

進一步想法

實際上，搭建平臺中的組件是可實現的。可以通過開發一個“iframe通訊組件”，再基于這個組件搭建一個C頁面作為“橋”。那么，因為B頁面和C頁面都是由搭建平臺生成，是同域的，那么，C頁面可以主動地通過iframe的contentWindow獲取到B頁面的高度。最后，A頁面和C頁面雖然是跨域，但是通過window.postMessage可以實現跨域通訊，A頁面只需要監聽message事件即可。

有了這樣一個作為“橋”的C頁面，那么以后不管運營同學通過搭建平臺發布什么頁面，A頁面都是可以完整展示B頁面的內容，并且B頁面不需要做任何事情。

前置知識

postMessage

otherWindow.postMessage(message, targetOrigin, [transfer]);

首先，otherWindow是一個其他窗口的引用，什么情況下可以獲得其他窗口呢？可以通過iframe的contentWindow、window.opener（這個頁面從哪里打開的）以及window.parent（A頁面通過iframe嵌套C頁面時，C頁面可通過window.parent獲取A頁面的引用）。
message是一個對象，簡單來說，傳輸時會默認做深拷貝，所以不用擔心引用的問題。具體拷貝規則： https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm （又發現了一個實現深拷貝的方式？）

targetOrigin通過這個參數來實現哪些窗口能收到這個消息，如果為'*'，那么就是都可以。可以傳入一個URI字符串，會通過協議、主機地址、端口去比對，三者中有一者不匹配，就傳不過去。

實現

C 頁面

先來實現作為“橋”的C頁面，這個頁面是主要的實現。
首先，C頁面是被A頁面通過iframe加載的，因此，這里通過獲取URL上參數的方式，獲得B頁面的鏈接。

const src = getQueryString('src');

獲取到鏈接后，C頁面通過iframe的方式加載B頁面，并且添加到文檔中。為了能夠獲取到B頁面的鏈接，我們需要在B頁面onload事件觸發后再獲取，此時頁面上的圖片已經加載完畢。

const iframe = document.createElement('iframe');
iframe.addEventListener('load', () => {
    // 關鍵步驟
});
iframe.src = src;
iframe.style.visibility = 'hidden';
document.body.appendChild(iframe);

最后實現onload事件中的關鍵步驟：獲取B頁面的高度、通過 postMessage 發送高度參數給A頁面。
獲取B頁面的高度：

const doc = iframe.contentDocument;
const iframeHeight = Math.max(doc.body.clientHeight, doc.documentElement.clientHeight, doc.body.scrollHeight, doc.documentElement.scrollHeight);

通過 window.parent 獲取A頁面的 window 對象的引用，最后通過window.parent.postMessage向A頁面發送消息：

if (window.parent) {
  window.parent.postMessage(
    {
      type: 'resize-iframe',
      data: {
        height: iframeHeight
      }
    },
    '*'
  );
}

A 頁面

A頁面做的事情就比較簡單了，就是一個iframe加載B頁面，另一個iframe加載C頁面。通過message事件獲取最終高度，調整B頁面iframe的高度。

const resizeHandler = (e) => {
  const data = e.data;
  if (data.type === 'resize-iframe') {
    const { height } = data.data;
    // 這里設置了最小400高度
    this.height = Math.max(400, height);
  }
};
window.addEventListener('message', resizeHandler);

關于“前端使用window.postMessage跨域數據交互的方法”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。