成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

window.postMessage跨域通信

xialong / 1737人閱讀

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

背景

最近公司要求所有產(chǎn)品付款頁面輸入卡號密碼信息的部分必須采用公司的統(tǒng)一頁面。
具體實現(xiàn)方案是，我們將公司統(tǒng)一的輸入卡號密碼的頁面通過iframe嵌入我們產(chǎn)品的付款頁面。用戶點擊付款時，我們需要給iframe的頁面發(fā)送消息，通知他們可以進(jìn)行付款處理了。
我們產(chǎn)品頁面與iframe內(nèi)嵌的頁面之間是不同域的頁面。所以在通知iframe付款時，我們采用了window.postMessage方法進(jìn)行通信。

window.postMessage方法介紹

假如我們的頁面的window對象引用是windowParent，內(nèi)嵌在iframe的頁面的window對象引用是windowCard。
付款時，我們需要給他們發(fā)送數(shù)據(jù)：

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

message: 給目標(biāo)頁面發(fā)送的數(shù)據(jù)。格式可以是各種數(shù)據(jù)對象。目前我們發(fā)送的格式為JSON字符串。

targetOrigin: 通常是字符串"*"或者一個URI，指定允許哪些域能接收到消息。如果采用*，那么意味著允許把數(shù)據(jù)發(fā)送到任一個站點。所以，如果我們明確知道目標(biāo)頁面的域，那么將域的URL給這個參數(shù)是更為安全的做法。

transfer(可選): “是一串和message同時傳遞的Transferable對象。這些對象的所有權(quán)將被轉(zhuǎn)移給消息的接收方，而發(fā)送一方將不再保有所有權(quán)”。

我們在發(fā)送消息給目標(biāo)頁面之后，目標(biāo)頁面進(jìn)行數(shù)據(jù)處理，處理完畢后會將處理結(jié)果返回給我們的頁面。

他們同樣用window.postMessage給我們發(fā)送處理結(jié)果。我們通過給我們頁面的message事件增加event handler來接收處理結(jié)果。

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

function receiveMessage(event)
{
    var data = event.data;
    var origin = event.origin;
    var source = event.source;
}

如上所示，event的屬性有:

data: 數(shù)據(jù)對象。目標(biāo)頁面會將她們的處理結(jié)果等等信息放在這里。

origin: postMessage發(fā)送方的origin。該字符串為協(xié)議、域名和端口號拼接而成。

source: postMessage發(fā)送方的window對象的引用。

樣例代碼(不可運行)

參考:
[1] https://developer.mozilla.org...

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/97183.html

相關(guān)文章

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

    摘要：前言需求背景最近開發(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)思路： ...

    Youngdze 評論0 收藏0

  • 利用window.postMessage()實現(xiàn)跨域消息傳遞（JavaScript）

    摘要：說明方法可以安全地實現(xiàn)對象之間的跨域通信。接收窗口隨后可根據(jù)需要自行處理此事件。傳遞給的參數(shù)通過事件對象暴露給接收窗口。發(fā)送端程序發(fā)送消息的基本語法就是接收消息的窗口的引用。接收程序度空間從接收消息從收到消息演示地址跨域消息傳遞 說明 window.postMessage()方法可以安全地實現(xiàn)Window對象之間的跨域通信。例如，在一個頁面和它生成的彈出窗口之間，或者是頁面和嵌入其中的...

    VincentFF 評論0 收藏0

  • 淺談前端跨域

    摘要：一什么是跨域跨域簡單的理解就是同源策略的限制。同源策略限制的內(nèi)容請求不能正常進(jìn)行。同源策略默認(rèn)地址是網(wǎng)頁的本身。 一、什么是跨域？ 跨域簡單的理解就是JavaScript同源策略的限制。是出于安全的考慮，a.com域名下的js不能操作b.com或者c.com域名下的對象。 當(dāng)協(xié)議、子域名、主域名、端口號中任意一個不相同時，都算作不同域。不同域之間相互請求資源，就算叫跨域。 一個正常...

    dunizb 評論0 收藏0

  • 雜談：前端Web通信

    摘要：作為開發(fā)同學(xué)的小伙伴客戶端的瀏覽器，有點小調(diào)皮還做了一個同源策略的限制，當(dāng)我們的數(shù)據(jù)請求遇到不同源的情況下跨域，我們就得嘗試其它的通信方法，不能一條道走到黑。 showImg(https://segmentfault.com/img/bVburZO?w=600&h=450); Web2.0以來，Ajax的出世，解決了傳統(tǒng)表單提交頁面跳轉(zhuǎn)，閃爍白屏等問題。使得Web頁面可以實現(xiàn)局部更新，...

    Betta 評論0 收藏0

發(fā)表評論

0條評論

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