HTML5 postMessage 跨域交換資料

之前簡單講解了利用script標籤（jsonp）以及iframe標籤（window.name、location.hash）來跨域交換資料，今天我們來學習一下html5的api，利用postmessage來跨域交換資料。和前面一些方式交換資料方式不同的是，利用postmessage不能和服務端交換資料，只能在兩個視窗（iframe）之間交換資料，廢話不多說，我們直接進入實戰。

；換句話說，你要交換資料，必須能獲取目標視窗(target window)的引用，不然兩個視窗之間毫無聯絡，想通訊也無能為力。

既然是h5家族的，我們也得觀望下它被廣大瀏覽器的接受程度（具體細節check can i use postmessage），可以看到接受程度還是相當高的：

而postmessage的使用方式也相當簡單：

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

otherwindow是對接收方視窗的引用，一般可以是以下幾種方式：

window.frames[0].postmessage
document.getelementsbytagname('iframe')[0].contentwindow
window.opener.postmessage
event.source.postmessage
window.open 返回的引用
...

而message顧名思義就是傳送的資料內容，支援字串、數字、json等幾乎所有形式的資料（詳見the structured clone algorithm）

targetorigin是接收方的uri（協議+主機+埠），也可以是url形式，但之後的內容（形如xx.html）會自動忽略；用萬用字元*可以指定所有域，但是切記不要用（for security）。

transfer可省略，沒看懂是啥意思...以後有需要的時候再研究

而接受方視窗一般監聽message事件，詳見下面的例子。

假設index頁面有個iframe（不同源），我們要給iframe傳送資料，而iframe得到資料後也傳送資料給top window，表示「我"得到資料了。直接看原始碼（思考如何傳送and如何接收）：

我們截圖看看列印的東西究竟長什麼樣（index頁面傳給iframe的資料）：

紅框標出的是三個最重要的屬性，data顧名思義就是傳輸的資料了；origin就是傳送訊息視窗的源(uri 協議+主機+埠）；而source就能引用傳送訊息的視窗物件（可以用它來引用傳送視窗進行訊息回傳）。

在訊息接收端監聽可以監聽message事件（**如上），當然如果要相容坑爹的ie肯定要用attachevent。這裡不推薦使用window.onmessage，相容性不大好（比如不能相容低版本ff）。

說完了跟同一頁面中的iframe的資料交換，再來說說兩個視窗之間的資料交換。我們知道用window.open()可以開啟乙個新的視窗，而如果兩個視窗同源，則兩個視窗的通訊將會非常簡單，我們可以通過window.opener.functionname在新視窗中呼叫原來視窗的方法（和變數）。但是如果兩個視窗不同源，這樣的操作將會變得很艱難，幸運的是h5給我們提供了postmessage，使得window.opener.postmessage()不會報錯！demo很簡單：

這裡要設定乙個定時器的原因是向目標視窗傳送資料必須等目標視窗完全載入完，也就是說要在目標視窗中先設定好「***」，傳送視窗發的資料才能被監聽到，所以給了個定時器delay，而因為載入時間的不確定所以定時器的delay值也不能確定；另外乙個可行的辦法是當目標頁面載入完後，發個訊息個源頁面（postmessage），而源頁面收到訊息，再用postmessage傳送訊息給目標頁面。

提到跨域交換資料，條件反射都會問一句，安全嗎？對於postmessage，答案是肯定的。

postmessage採用的是「雙向安全機制」。傳送方傳送資料的時候，會確認接受方的源（所以最好不要用*），而接受方監聽到message事件後，也可以用event.origin判斷是否來自於正確可靠的傳送方。

window.postmessage()

html5的postmessage使用記要

cross-window messaging with postmessage

html5 postmessage 和 onmessage api 詳細應用

HTML5 postMessage 跨域交換資料

HTML5 之跨域通訊（postMessage）

html5介紹,什麼是html5,html5新特性

HTML5學習之 HTML 5 拖放

HTML5 postMessage 跨域交換資料

HTML5 之跨域通訊（postMessage）

html5介紹,什麼是html5,html5新特性

HTML5學習之 HTML 5 拖放

相關推薦