歡迎光臨
每天分享高質量文章

HTML5 postMessage 跨域交換資料

作者:韓子遲

網址:http://www.cnblogs.com/zichi/p/4638096.html

點選“閱讀原文”可檢視本文網頁版


前言

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

實戰postMessage

  • overview

上文中說,postMessage是用於兩個視窗(iframe)之間交換資料的,如果我們同時開啟著百度和谷歌兩個頁面,是不是說這兩者之間就可以通訊了?No,no,no,事實並非如此,就算百度和谷歌倆頁面有通訊的意願也不行。兩個視窗能通訊的前提是,一個視窗以iframe的形式存在於另一個視窗,或者一個視窗是從另一個視窗透過window.open()或者超連結的形式開啟的(同樣可以用window.opener獲取源視窗);換句話說,你要交換資料,必須能獲取標的視窗(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事件,詳見下麵的例子。

  • window iframe

假設index頁面有個iframe(不同源),我們要給iframe傳送資料,而iframe得到資料後也傳送資料給top window,表示“我”得到資料了。直接看原始碼(思考如何傳送and如何接收):


贊(0)

分享創造快樂