亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

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

Youngdze / 2358人閱讀

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

前言 需求背景：

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

實(shí)現(xiàn)思路：

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

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

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

項(xiàng)目背景

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

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

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

iframe-MDN

window.postMessage()-MDN

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

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

message：將要發(fā)送到其他window的數(shù)據(jù)（可以不受限制的將數(shù)據(jù)對(duì)象安全的傳送給目標(biāo)窗口而無(wú)需自己序列化，原因是因?yàn)椴捎昧私Y(jié)構(gòu)化克隆算法）

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

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

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

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

type：表示監(jiān)聽(tīng)事件類(lèi)型的字符串

listener：當(dāng)所監(jiān)聽(tīng)的事件類(lèi)型觸發(fā)時(shí)，會(huì)通知的一個(gè)對(duì)象或者一個(gè)函數(shù)

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

具體參考：addEventListener-MDN

receiveMessage = (event) => {}

event.data：從另一個(gè)window傳遞過(guò)來(lái)的對(duì)象（包含傳遞過(guò)來(lái)的所有信息）

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

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

注意點(diǎn)?。?！

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

event.origin中的origin不能保證是該窗口的當(dāng)前origin或者未來(lái)origin，因?yàn)閜ostMessage被調(diào)用后，可能會(huì)被導(dǎo)航到不同的位置，所以需要做個(gè)異常情況判斷處理origin !== "http://www.blogoog.com:8088"

2、B頁(yè)面使用到的語(yǔ)法 top.postMessage("data", "http://www.blogoog.com:8000")

參考上面A頁(yè)面的語(yǔ)法

為什么用top而不用window下面再講

window.addEventListener("message", receiveMessage, false);

參考上面A頁(yè)面的語(yǔ)法

receiveMessage = (event) => {}

參考上面A頁(yè)面的語(yǔ)法

window.postMessage()中的window到底是啥？

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

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

B頁(yè)面中：B頁(yè)面想A頁(yè)面發(fā)送跨域信息，window就是A頁(yè)面的window，在這里因?yàn)锽頁(yè)面時(shí)嵌入到A頁(yè)面中的，對(duì)于B頁(yè)面來(lái)講，window就是top或者parent

需要特別注意的坑

一定要等A頁(yè)面嵌入的B頁(yè)面加載完成之后，再進(jìn)行postMessage跨域通信

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

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

獻(xiàn)上代碼 A頁(yè)面


B頁(yè)面

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/95032.html

相關(guān)文章

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

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

    tomorrowwu 評(píng)論0 收藏0

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

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

    dreambei 評(píng)論0 收藏0

  • window.postMessage跨域通信

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

    xialong 評(píng)論0 收藏0

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

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

    ZoomQuiet 評(píng)論0 收藏0

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

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

    livem 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<