window.postMessage是一個鮮為人知的HTML5 API。 window.postMessage允許兩個窗口/幀之間跨域發(fā)送數(shù)據(jù)消息。從本質(zhì)上講，window.postMessage是一個跨域的無服務器墊片的Ajax。讓我們一起來看看window.postMessage的例子，以及如何在火狐，IE8+，Opera，Safari和Chrome瀏覽器中使用它。
第一部分：發(fā)送者
程序的第一步是建立一個源，在這個源里面，我們將打開一個窗口(或者是iframe，如果你更喜歡的話)，給另外新的窗口發(fā)送消息(因為是例子的緣故，我們將每6秒發(fā)送一次消息，同時并創(chuàng)建一個事件監(jiān)聽器監(jiān)聽我們收到的從目標窗口任何回應。)
我使用是在IE中無法工作的window.addEventListener方法(IE中window.attachEvent方法)。你可以使用MooTools/jQuery/Dojo庫中做了兼容處理的方法。
假設正確的打開了窗口，我們發(fā)送消息所指定的URI信息(包括協(xié)議，主機名和端口，如果存在的話)，必須當時存在(因為用戶可能已經(jīng)改變的隨后窗口的地址)，如果這個目標窗口不存在，消息將無法發(fā)送。
我們還要創(chuàng)建了一個事件處理程序，用于接收消息。這是非常重要的，您必須驗證事件起源當接收到一個消息，因為消息處理程序接受來自任何URI的消息!原點一旦通過驗證，你可以在任何你喜歡的方式處理所接受到的消息。
使用iframe的時候如下：
必須訪問iframe的contentWindow屬性——而不是節(jié)點本身。
第二部分：目標窗口
程序的第二部分是目標窗口的準備。目標窗口建立“message”事件的事件偵聽器，同時應該驗證信息的來源。同樣的，消息事件接受從任何位置。所以建立一個信任源列表來驗證消息源是很重要的。
面的示例代碼是目標窗口發(fā)送一個消息回應給發(fā)送方，確認消息已經(jīng)收到了。這些事件屬性十分重要：
source——發(fā)送消息的來源窗口或者iframe
origin——發(fā)送消息的URI(包括協(xié)議，域名和端口，如果有的話)
data——接受的消息內(nèi)容
這三個屬性對驗證消息十分重要。
使用window.postMessage注意
像其他web技術(shù)一樣，如果使用不當，就會很危險。如果沒有驗證消息源，它將威脅應用程序的安全。window.postmessage就像JavaScript式的PHP這方面的技術(shù)。window.postMessage很酷，不是嗎?