国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

iframe+postMessage實現(xiàn)跨域通信

Youngdze / 2292人閱讀

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

前言 需求背景：

最近開發(fā)管理系統(tǒng)，需要在本頁面跳轉(zhuǎn)到一個圖片管理系統(tǒng)上傳圖片，上傳成功后返回圖片鏈接，然后返回管理系統(tǒng)，顯示圖片

實現(xiàn)思路：

上傳圖片時，需要在本窗口跳轉(zhuǎn)到圖片管理系統(tǒng)，并且兩個系統(tǒng)之間要通信

考慮到兩個系統(tǒng)是不同的端口號，存在跨域問題，這時發(fā)現(xiàn)HTML5新增了一個API-window.postMessage()，于是就決定用iframe結(jié)合window.postMessage()實現(xiàn)

在頁面中嵌入一個iframe，將圖片管理系統(tǒng)嵌入到當(dāng)前的管理系統(tǒng)中，結(jié)合window.postMessage()實現(xiàn)跨域通信

項目背景

該管理系統(tǒng)基于React.js搭建，在此簡稱為A頁面，地址為http://www.blogoog.com:8000

圖片管理系統(tǒng)基于Vue.js搭建，在此簡稱為B頁面，地址為http://www.blogoog.com:8088

具體實現(xiàn) 參考資料

iframe-MDN

window.postMessage()-MDN

1、A頁面使用到的語法 window.postMessage() 
otherWindow.postMessage(message, targetOrigin, [transfer]);

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

message：將要發(fā)送到其他window的數(shù)據(jù)（可以不受限制的將數(shù)據(jù)對象安全的傳送給目標(biāo)窗口而無需自己序列化，原因是因為采用了結(jié)構(gòu)化克隆算法）

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

transfer：可選參數(shù)（在這里我沒使用）

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

window.addEventListener("message", receiveMessage, false); 
target.addEventListener(type, listener, options);

type：表示監(jiān)聽事件類型的字符串

listener：當(dāng)所監(jiān)聽的事件類型觸發(fā)時，會通知的一個對象或者一個函數(shù)

potions：可選參數(shù)（在此我用false，表示在listener被調(diào)用之后不會自動移除）

具體參考：addEventListener-MDN

receiveMessage = (event) => {}

event.data：從另一個window傳遞過來的對象（包含傳遞過來的所有信息）

event.origin||event.originalEvent.origin：window.postMessage()發(fā)送消息的目標(biāo)URL

event.source：對發(fā)送消息的窗口對象的引用

注意點！！！

在頁面內(nèi)嵌入iframe頁面的情況下，需要等到頁面內(nèi)的iframe頁面，也就是B頁面加載完成之后，才能進行postMessage跨域通信

event.origin中的origin不能保證是該窗口的當(dāng)前origin或者未來origin，因為postMessage被調(diào)用后，可能會被導(dǎo)航到不同的位置，所以需要做個異常情況判斷處理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到底是啥？

始終是你需要通信的目標(biāo)窗口

A頁面中：A頁面向B頁面發(fā)送跨域信息，window就是在A頁面中嵌入的iframe指向的B頁面的window，即：iframe.contentWindow

B頁面中：B頁面想A頁面發(fā)送跨域信息，window就是A頁面的window，在這里因為B頁面時嵌入到A頁面中的，對于B頁面來講，window就是top或者parent

需要特別注意的坑

一定要等A頁面嵌入的B頁面加載完成之后，再進行postMessage跨域通信

一定要對origin做判斷，去掉不是來自我們目標(biāo)窗口的origin，防止來自其他origin的攻擊

著重注意window.postMessage()中window的用法，明確目標(biāo)窗口的window

獻上代碼 A頁面


B頁面

我的博客即將搬運同步至騰訊云+社區(qū)，邀請大家一同入駐：https://cloud.tencent.com/dev...

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/95032.html

相關(guān)文章

  • messengerjs iframe 跨域傳數(shù)據(jù)

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

    tomorrowwu 評論0 收藏0

  • 前端爬坑日記之vue內(nèi)嵌iframe并跨域通信

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

    dreambei 評論0 收藏0

  • window.postMessage跨域通信

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

    xialong 評論0 收藏0

  • 關(guān)于跨域問題

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

    ZoomQuiet 評論0 收藏0

  • 關(guān)于跨域問題

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

    livem 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<