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

資訊專欄INFORMATION COLUMN

window.postMessage跨域通信

xialong / 1729人閱讀

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

背景

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

window.postMessage方法介紹

假如我們的頁面的window對象引用是windowParent，內嵌在iframe的頁面的window對象引用是windowCard。
付款時，我們需要給他們發送數據：

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

message: 給目標頁面發送的數據。格式可以是各種數據對象。目前我們發送的格式為JSON字符串。

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

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

我們在發送消息給目標頁面之后，目標頁面進行數據處理，處理完畢后會將處理結果返回給我們的頁面。

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

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

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

如上所示，event的屬性有:

data: 數據對象。目標頁面會將她們的處理結果等等信息放在這里。

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

source: postMessage發送方的window對象的引用。

樣例代碼(不可運行)

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

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

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

相關文章

  • iframe+postMessage實現跨域通信

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

    Youngdze 評論0 收藏0

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

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

    VincentFF 評論0 收藏0

  • 淺談前端跨域

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

    dunizb 評論0 收藏0

  • 雜談：前端Web通信

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

    Betta 評論0 收藏0

發表評論

0條評論

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