媒介
需求背景：
近來開闢治理體系，須要在本頁面跳轉到一個圖片治理體繫上傳圖片，上傳勝利后返回圖片鏈接，然後返回治理體系，顯現圖片
完成思緒：
- 上傳圖片時，須要在本窗口跳轉到圖片治理體系，而且兩個體系之間要通訊
- 考慮到兩個體系是差別的端口號，存在跨域題目，這時候發明HTML5新增了一個API-window.postMessage()，於是就決議用iframe連繫window.postMessage()完成
- 在頁面中嵌入一個iframe，將圖片治理體系嵌入到當前的治理體系中，連繫window.postMessage()完成跨域通訊
項目背景
- 該治理體系基於React.js搭建，在此簡稱為A頁面，地點為
http://www.blogoog.com:8000 - 圖片治理體系基於Vue.js搭建，在此簡稱為B頁面，地點為
http://www.blogoog.com:8088
詳細完成
參考資料
1、A頁面運用到的語法
window.postMessage()
otherWindow.postMessage(message, targetOrigin, [transfer]);
- otherWindow：其他窗口的一個援用（在這裏我運用了iframe的contentWindow屬性）
- message：將要發送到其他window的數據（能夠不受限定的將數據對象平安的傳送給目的窗口而無需本身序列化，緣由是由於採用了結構化克隆算法）
- targetOrigin：吸收信息的URL（在這裏我固然填的B頁面的URL）
- transfer：可選參數（在這裏我沒運用）
window.addEventListener(‘message’, receiveMessage, false);
target.addEventListener(type, listener, options);
- type：示意監聽事宜範例的字符串
- listener：當所監聽的事宜範例觸發時，會關照的一個對象或許一個函數
- potions：可選參數（在此我用false，示意在listener被挪用以後不會自動移除）
詳細參考：addEventListener-MDN
receiveMessage = (event) => {}
- event.data：從另一個window通報過來的對象（包括通報過來的一切信息）
- event.origin||event.originalEvent.origin：window.postMessage()發送音訊的目的URL
- event.source：對發送音訊的窗口對象的援用
注重點！！！
- 在頁面內嵌入iframe頁面的情況下，須要比及頁面內的iframe頁面，也就是B頁面加載完成以後，才舉行postMessage跨域通訊
- event.origin中的origin不能保證是該窗口的當前origin或許將來origin，由於postMessage被挪用后，能夠會被導航到差別的位置，所以須要做個異常情況推斷處置懲罰
origin !== 'http://www.blogoog.com:8088'
2、B頁面運用到的語法
top.postMessage(‘data’, ‘http://www.blogoog.com:8000′)
- 參考上面A頁面的語法
- 為什麼用top而不必window下面再講
window.addEventListener(‘message’, receiveMessage, false);
- 參考上面A頁面的語法
receiveMessage = (event) => {}
- 參考上面A頁面的語法
window.postMessage()中的window究竟是啥？
始終是你須要通訊的目的窗口
- A頁面中：A頁面向B頁面發送跨域信息，window就是在A頁面中嵌入的iframe指向的B頁面的window，即：
iframe.contentWindow - B頁面中：B頁面想A頁面發送跨域信息，window就是A頁面的window，在這裏由於B頁面時嵌入到A頁面中的，關於B頁面來說，window就是
top或許parent
須要特別注重的坑
- 肯定要等A頁面嵌入的B頁面加載完成以後，再舉行postMessage跨域通訊
- 肯定要對origin做推斷，去掉不是來自我們目的窗口的origin，防備來自其他origin的進擊
- 偏重注重window.postMessage()中window的用法，明白目的窗口的window
獻上代碼
A頁面
B頁面
我的博客行將搬運同步至騰訊雲+社區，約請人人一同入駐：https://cloud.tencent.com/dev…
