實現兩個窗口通信方法－postMessage

LeanCloud 發布于2019-08-22 18:19 / 1617人閱讀

摘要：調用時消息發送方窗口的這個字符串由協議域名端口號拼接而成。請注意，這個不能保證是該窗口的當前或未來，因為被調用后可能被導航到不同的位置。對發送消息的窗口對象的引用您可以使用此來在具有不同的兩個窗口之間建立雙向通信。

postMessage

otherWindow:其他窗口的一個引用，比如iframe的contentWindow屬性、執行window.open返回的窗口對象、或者是命名過或數值索引的window.frames。

message:將要發送到其他 window 的數據。它將會被結構化克隆算法序列化。這意味著你可以不受什么限制的將數據對象安全的傳送給目標窗口而無需自己序列化。

targetOrigin:通過窗口的origin屬性來指定哪些窗口能接收到消息事件，其值可以是字符串”“（表示無限制）或者一個URI。在發送消息的時候，如果目標窗口的協議、主機地址或端口這三者的任意一項不匹配targetOrigin提供的值，那么消息就不會被發送；只有三者完全匹配，消息才會被發送。這個機制用來控制消息可以發送到哪些窗口；例如，當用postMessage傳送密碼時，這個參數就顯得尤為重要，必須保證它的值與這條包含密碼的信息的預期接受者的orign屬性完全一致，來防止密碼被惡意的第三方截獲。如果你明確的知道消息應該發送到哪個窗口，那么請始終提供一個有確切值的targetOrigin，而不是。不提供確切的目標將導致數據泄露到任何對數據感興趣的惡意站點。

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

message 的一些屬性

data:從其他 window 中傳遞過來的對象。

origin:調用 postMessage 時消息發送方窗口的 origin . 這個字符串由協議、“://“、域名、“ : 端口號”拼接而成。例如 “https://example.org (implying port 443)”、“http://example.net (implying port 80)”、“http://example.com:8080”。請注意，這個origin不能保證是該窗口的當前或未來origin，因為postMessage被調用后可能被導航到不同的位置。

source:對發送消息的窗口對象的引用; 您可以使用此來在具有不同origin的兩個窗口之間建立雙向通信。

實現通信demo:

// a.com/index.html


// b.com/index.html

GPU云服務器云服務器 webrtc實現共享窗口 java窗口實現日志同時運行兩個方法 js方法傳兩個參數

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

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

實現兩個窗口通信方法－postMessage

摘要：調用時消息發送方窗口的這個字符串由協議域名端口號拼接而成。請注意，這個不能保證是該窗口的當前或未來，因為被調用后可能被導航到不同的位置。對發送消息的窗口對象的引用您可以使用此來在具有不同的兩個窗口之間建立雙向通信。 postMessage otherWindow:其他窗口的一個引用，比如iframe的contentWindow屬性、執行window.open返回的窗口對象、或者是命名...

NoraXie 2019-08-02 10:46 評論0 收藏0
兩個瀏覽器窗口間通信總結

摘要：兩個瀏覽器窗口間通信總結一個窗口更新，另一個窗口監聽對象的事件，來實現通信。通過窗口的屬性來指定哪些窗口能接收到消息事件，其值可以是字符串表示無限制或者一個。父窗口先打開一個子窗口，載入一個不同源的網頁，該網頁將信息寫入屬性。兩個瀏覽器窗口間通信總結 1、localStorage 一個窗口更新localStorage，另一個窗口監聽window對象的storage事件，來實現通信。注...

Shonim 2019-08-23 12:51 評論0 收藏0
iframe+postMessage實現跨域通信

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

Youngdze 2019-08-22 17:17 評論0 收藏0
瀏覽器同源政策以及JS跨域

摘要：瀏覽器同源政策以及跨域同源是指協議相同域名相同端口相同。同源政策的目的，是為了保證用戶信息的安全，防止惡意的網站竊取數據。該協議不實行同源政策，只要服務器支持，就可以通過它進行跨源通信。參考文獻瀏覽器同源政策及其規避方法詳解跨域問題瀏覽器同源政策以及JS跨域同源是指協議相同、域名相同、端口相同。同源政策的目的，是為了保證用戶信息的安全，防止惡意的網站竊取數據。同源策略主要限制下面...

zeyu 2019-08-20 18:16 評論0 收藏0
淺談前端跨域

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

dunizb 2019-08-26 13:55 評論0 收藏0