postMessage 跨域訊息傳遞

window.postmessage() 方法允許來自乙個文件的指令碼可以傳遞文字訊息到另乙個文件裡的指令碼，而不用管是否跨域。乙個文件裡的指令碼還是不能呼叫在其他文件裡方法和讀取屬性，但他們可以用這種訊息傳遞技術來實現安全的通訊。

這項技術稱為「跨文件訊息傳遞」，又稱為「視窗間訊息傳遞」或者「跨域訊息傳遞」。

postmessage() 方法，該方法允許有限的通訊 —— 通過非同步訊息傳遞的方式 —— 在來自不同源的指令碼之間。

postmessage 可用於解決以下方面的問題：

想要使用 postmessage 實現跨域通訊和頁面間資料通訊，只要記住 window 提供的 postmessage 方法和 message 事件就ok了。

otherwindow.postmessage(message, targetorigin, [transfer]);

otherwindow

其他視窗的乙個引用，比如 iframe 的 contentwindow 屬性、執行 window.open 返回的視窗物件、或者是命名過或數值索引的 window.frames。

message

要傳送的資料。它將會被結構化轉殖演算法序列化，所以無需自己序列化（部分低版本瀏覽器只支援字串，所以傳送的資料最好用json.stringify() 序列化）。

targetorigin

通過 targetorigin 屬性來指定哪些視窗能接收到訊息事件，其值可以是字串「*」（表示無限制）或者乙個 uri（如果要指定和當前視窗同源的話可設定為"/"）。在傳送訊息的時候，如果目標視窗的協議、主機位址或埠號這三者的任意一項不匹配 targetorigin 提供的值，那麼訊息就不會傳送。

如果指定的源匹配的話，那麼當呼叫 postmessage() 方法的時候，在目標視窗的window物件上就會觸發乙個 message 事件。

window.addeventlistener("message", (event)=>, false);

event 的屬性有：

當想要在web頁面中嵌入乙個來自其他站點的模組或者「gadget」的時候，利用 postmessage() 和 message 事件實現的跨域訊息傳遞是很有用的。

首先 gadget 的開發者可以將 gadget 內容定義在乙個 html 頁面中，它負責監聽 message 事件，並將它們分發給對應的 js 函式去處理。然後，嵌入 gadget 的web頁面就可以通過 postmessage() 方法傳遞訊息來和 gadget 進行互動了。

1. 不同 origin 的兩個視窗之間建立雙向資料通訊

/**
* localhost:10002/index頁面
**/// 接收訊息
window.addeventlistener('message', (e) => )
// 傳送訊息
* localhost:10001/user頁面
**/window.addeventlistener('message', (e) => )

2. 頁面與巢狀的 iframe 訊息傳遞

/* android 平台 post message 訊息監聽 hook */
window.android_handlemessage = message => ;

如果你不希望從其他**接收 message，請不要為 message 事件新增任何事件***。

如果你確實希望從其他**接收message，請始終使用 origin 和 source 屬性驗證發件人的身份。

當你使用 postmessage 將資料傳送到其他視窗時，始終指定精確的目標 origin，而不是 *。

所有主流瀏覽器（包括ie8）都支援。

postMessage 跨域訊息傳遞

跨域呼叫 postMessage

解決跨域三 postMessage

HTML5 postMessage 跨域交換資料

postMessage 跨域訊息傳遞

跨域呼叫 postMessage

解決跨域 三 postMessage

HTML5 postMessage 跨域交換資料

相關推薦

解決跨域三 postMessage