iframe+postMessage實現跨域通信

Youngdze 發布于2019-08-22 17:17 / 2300人閱讀

摘要：前言需求背景最近開發管理系統，需要在本頁面跳轉到一個圖片管理系統上傳圖片，上傳成功后返回圖片鏈接，然后返回管理系統，顯示圖片實現思路上傳圖片時，需要在本窗口跳轉到圖片管理系統，并且兩個系統之間要通信考慮到兩個系統是不同的端口號，存在跨域問題

前言 需求背景：

最近開發管理系統，需要在本頁面跳轉到一個圖片管理系統上傳圖片，上傳成功后返回圖片鏈接，然后返回管理系統，顯示圖片

實現思路：

上傳圖片時，需要在本窗口跳轉到圖片管理系統，并且兩個系統之間要通信

考慮到兩個系統是不同的端口號，存在跨域問題，這時發現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

具體實現 參考資料

iframe-MDN

window.postMessage()-MDN

1、A頁面使用到的語法 window.postMessage()

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

otherWindow：其他窗口的一個引用（在這里我使用了iframe的contentWindow屬性）

message：將要發送到其他window的數據（可以不受限制的將數據對象安全的傳送給目標窗口而無需自己序列化，原因是因為采用了結構化克隆算法）

targetOrigin：接收信息的URL（在這里我當然填的B頁面的URL）

transfer：可選參數（在這里我沒使用）

具體參考：window.postMessage()-MDN

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...

云服務器 GPU云服務器 iframe跨域實現跨域 js實現跨域訪問跨域通信

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/95032.html

messengerjs iframe 跨域傳數據

摘要：剛來公司時做得第一個項目是跨部門合作，使用了來做通信，十分簡單，代碼不長，這里分析一下間通信的實現方式源碼消息前綴建議使用自己的項目名避免多項目之間的沖突注意消息前綴應使用字符串類型類消息對象往發送消息出于安全考慮發送消息會帶上前綴剛來公司時做得第一個項目是跨部門合作，使用了MessengerJS來做通信，十分簡單，MessengerJS代碼不長，這里分析一下iframe間通信的實現...

tomorrowwu 2019-08-19 18:16 評論0 收藏0
前端爬坑日記之vue內嵌iframe并跨域通信

摘要：由于該項目是基于原本的安卓，做的微信，所以原來的使用的頁面現在需要在中實現，那就是使用查看了很多很多文檔，其中這一篇是很有價值的下面將天的爬坑最終以問答的方式總結如下組件中如何引入如何獲取對象以及內的對象如何向內傳送信息內如何向外部發送信息由于該項目是基于原本的安卓app，做的微信h5，所以原來的使用webview的頁面現在需要在vue中實現，那就是使用iframe查看了很多很多文檔...

dreambei 2019-08-23 11:42 評論0 收藏0
window.postMessage跨域通信

摘要：背景最近公司要求所有產品付款頁面輸入卡號密碼信息的部分必須采用公司的統一頁面。所以在通知付款時，我們采用了方法進行通信。這些對象的所有權將被轉移給消息的接收方，而發送一方將不再保有所有權。該字符串為協議域名和端口號拼接而成。背景最近公司要求所有產品付款頁面輸入卡號密碼信息的部分必須采用公司的統一頁面。具體實現方案是，我們將公司統一的輸入卡號密碼的頁面通過iframe嵌入我們產品的付...

xialong 2019-08-23 11:35 評論0 收藏0
關于跨域問題

摘要：面試必考題吧，所以在這會詳細介紹以下內容跨域產生的原因羅列最常用的解決方法分析各種方法原理羅列各種方法優缺點什么是跨域由于瀏覽器廠商對安全性的考慮，提出了瀏覽器的同源策略做為解決方案。面試必考題吧，所以在這會詳細介紹以下內容跨域產生的原因羅列最常用的解決方法分析各種方法原理羅列各種方法優缺點什么是跨域由于瀏覽器廠商對安全性的考慮，提出了瀏覽器的同源策略做為解決方案。它...

ZoomQuiet 2019-08-23 16:25 評論0 收藏0
關于跨域問題

摘要：面試必考題吧，所以在這會詳細介紹以下內容跨域產生的原因羅列最常用的解決方法分析各種方法原理羅列各種方法優缺點什么是跨域由于瀏覽器廠商對安全性的考慮，提出了瀏覽器的同源策略做為解決方案。面試必考題吧，所以在這會詳細介紹以下內容跨域產生的原因羅列最常用的解決方法分析各種方法原理羅列各種方法優缺點什么是跨域由于瀏覽器廠商對安全性的考慮，提出了瀏覽器的同源策略做為解決方案。它...

livem 2019-08-02 16:09 評論0 收藏0