HTML5中window.postMessage,在兩個頁面之間的數據傳遞

關於postMessage

window.postMessage雖然說是html5的功能,但是支持IE8+,假如你的網站不需要支持IE6和IE7,那麼可以使用window.postMessage。關於window.postMessage,很多朋友說他可以支持跨域,不錯,window.postMessage是客戶端和客戶端直接的數據傳遞,既可以跨域傳遞,也可以同域傳遞。

應用場景

我只是簡單的舉一個應用場景,當然,這個功能很多地方可以使用。

假如你有一個頁面,頁面中拿到部分用戶信息,點擊進入另外一個頁面,另外的頁面默認是取不到用戶信息的,你可以通過window.postMessage把部分用戶信息傳到這個頁面中。(當然,你要考慮安全性等方面。)

代碼舉例

發送信息:

要延遲一下,我們一般用計時器setTimeout延遲再發用。

接受的頁面

如下圖,接受頁面得到數據

如果是使用iframe,代碼應該這樣寫:

接受數據

上面的代碼片段是往消息源反饋信息,確認消息已經收到。下面是幾個比較重要的事件屬性:

source – 消息源,消息的發送窗口/iframe。

origin – 消息源的URI(可能包含協議、域名和端口),用來驗證數據源。

data – 發送方發送給接收方的數據。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章