關於postMessage
window.postMessage雖然說是html5的功能,但是支持IE8+,假如你的網站不需要支持IE6和IE7,那麼可以使用window.postMessage。關於window.postMessage,很多朋友說他可以支持跨域,不錯,window.postMessage是客戶端和客戶端直接的數據傳遞,既可以跨域傳遞,也可以同域傳遞。
應用場景
我只是簡單的舉一個應用場景,當然,這個功能很多地方可以使用。
假如你有一個頁面,頁面中拿到部分用戶信息,點擊進入另外一個頁面,另外的頁面默認是取不到用戶信息的,你可以通過window.postMessage把部分用戶信息傳到這個頁面中。(當然,你要考慮安全性等方面。)
代碼舉例
發送信息:
要延遲一下,我們一般用計時器setTimeout延遲再發用。
接受的頁面
如下圖,接受頁面得到數據
如果是使用iframe,代碼應該這樣寫:
接受數據
上面的代碼片段是往消息源反饋信息,確認消息已經收到。下面是幾個比較重要的事件屬性:
source – 消息源,消息的發送窗口/iframe。
origin – 消息源的URI(可能包含協議、域名和端口),用來驗證數據源。
data – 發送方發送給接收方的數據。