今天小編來和大家講講有關于:“前端使用window.postMessage跨域數(shù)據(jù)交互案例分享!”這方面的相關內(nèi)容吧!因為跨域交互是我們比較廣泛的問題!
背景
在一個App內(nèi)嵌的H5中,產(chǎn)品希望在頁面的下放設置一個區(qū)域,里面展示運營同學通過活動搭建平臺生成的教學頁面,頁面由運營同學自己搭建、替換,產(chǎn)品同學希望H5中能完整展示這個教學頁面的內(nèi)容。
從業(yè)務需求上描述,就是一個H5(A頁面)內(nèi)需要通過iframe加載另一個H5頁面(B頁面)。但是從技術角度來看就有以下幾點需要注意的地方:
- B頁面的高度不確定,B頁面由活動搭建平臺生成,至于展示的內(nèi)容是什么、有多少并不知道。
- A頁面和B頁面是不同源的,因此無法直接通過iframe的contentWindow獲取到B頁面的尺寸。
解決方法
其實接合1、2點,核心就是需要在A頁面獲取到B頁面的高度,然后調整A頁面展示區(qū)域的高度,實現(xiàn)在A頁面完整展示B頁面的功能。
初步想法
這里我想到了使用window.postMessage去解決不同域下頁面通訊的問題。A頁面不能主動通過不同域的contentWindow獲取到B頁面的尺寸,那么,讓B頁面通過window.postMessage通知頁面A就好了,自己獲取自己的總能獲取到。
但是問題來了,B頁面不是確定的,是由運營通過搭建平臺生成的,也就是說,是沒辦法在B頁面通過代碼入侵的方式通知A頁面。
進一步想法
實際上,搭建平臺中的組件是可實現(xiàn)的??梢酝ㄟ^開發(fā)一個“iframe通訊組件”,再基于這個組件搭建一個C頁面作為“橋”。那么,因為B頁面和C頁面都是由搭建平臺生成,是同域的,那么,C頁面可以主動地通過iframe的contentWindow獲取到B頁面的高度。最后,A頁面和C頁面雖然是跨域,但是通過window.postMessage可以實現(xiàn)跨域通訊,A頁面只需要監(jiān)聽message事件即可。
有了這樣一個作為“橋”的C頁面,那么以后不管運營同學通過搭建平臺發(fā)布什么頁面,A頁面都是可以完整展示B頁面的內(nèi)容,并且B頁面不需要做任何事情。
前置知識
postMessage
otherWindow.postMessage(message, targetOrigin, [transfer]);
首先,otherWindow是一個其他窗口的引用,什么情況下可以獲得其他窗口呢?可以通過iframe的contentWindow、window.opener(這個頁面從哪里打開的)以及window.parent(A頁面通過iframe嵌套C頁面時,C頁面可通過window.parent獲取A頁面的引用)。
message是一個對象,簡單來說,傳輸時會默認做深拷貝,所以不用擔心引用的問題。具體拷貝規(guī)則: https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm (又發(fā)現(xiàn)了一個實現(xiàn)深拷貝的方式?)
targetOrigin通過這個參數(shù)來實現(xiàn)哪些窗口能收到這個消息,如果為'*',那么就是都可以。可以傳入一個URI字符串,會通過協(xié)議、主機地址、端口去比對,三者中有一者不匹配,就傳不過去。
更詳細的可以閱讀: https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage
實現(xiàn)
C 頁面
先來實現(xiàn)作為“橋”的C頁面,這個頁面是主要的實現(xiàn)。
首先,C頁面是被A頁面通過iframe加載的,因此,這里通過獲取URL上參數(shù)的方式,獲得B頁面的鏈接。
const src = getQueryString('src');
獲取到鏈接后,C頁面通過iframe的方式加載B頁面,并且添加到文檔中。為了能夠獲取到B頁面的鏈接,我們需要在B頁面onload事件觸發(fā)后再獲取,此時頁面上的圖片已經(jīng)加載完畢。
const iframe = document.createElement('iframe');
iframe.addEventListener('load', () => {
// 關鍵步驟
});
iframe.src = src;
iframe.style.visibility = 'hidden';
document.body.appendChild(iframe);
最后實現(xiàn)onload事件中的關鍵步驟:獲取B頁面的高度、通過 postMessage 發(fā)送高度參數(shù)給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頁面發(fā)送消息:
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的方式進行跨域其實也是第一次去實踐,以前總是在一些面試復習資料中了解到,但日常的跨域基本上都是用CORS的場景(其實CORS都不用前端做什么事情),甚至連JSONP都沒有。
業(yè)務中能用到不常用的方式解決問題,感覺也是挺好的,起碼知識不會停留在字面上~
那么到這里我們今天有關于:“前端使用window.postMessage跨域數(shù)據(jù)交互案例分享!”這方面的相關內(nèi)容分享就到這邊了,更多有光于html5這方面的相關內(nèi)容我們都可以在W3Cschool中進行學習和了解!