HTML5實戰與剖析之跨文檔訊息傳遞(iframe傳遞訊息)

　　在來自不同網域的頁間傳遞訊息一般統稱為跨文件訊息傳送，簡稱XDM。如，www.leemagnum.com網域中的頁面與位於一個內嵌框架中的//m.sbmmt.com/網域中的頁面通訊。在XDM機制出現之前，要毫無壓力地實現這種通訊需要很長時間。 XDM把這種機制規範化，讓咱們能夠既穩健又簡單地實現跨文檔通訊。

　　XDM的核心是postMessage()方法。對於XDM而言，」另一個地方」指的是包含在目前頁面中的iframe標籤，或有目前頁面彈出的視窗。

　　postMessage()方法接收兩個參數：一則訊息和一個表示訊息接受來自哪個網域的字串。第二個參數對保障安全通訊非常重要，可以防止瀏覽器把訊息送到不安全的地方。小例子如下

　　HTML程式碼

<iframe id="iframe" src="http://blog.csdn.net/lee_magnum" frameborder="0"></iframe>

　　Java〜2一行　　

的最後一行程式碼中發送程式碼中的最後一行。訊息，並製定框架中的文檔必須來自”//m.sbmmt.com/”域。如果來源匹配，訊息會傳遞到內嵌框架中，否則，postMessage()什麼都不做。這項限制可以避免視窗中的位置在某些情況下改變。如果傳給postMessage()的第二個參數是”*”，則表示可以把訊息傳送給來自任何網域的文件。

　　接收到XDM訊息的時候，會觸發window物件的message事件。這個事件是以非同步形式觸發的，所以從發送訊息到接收訊息(觸發接收視窗的message事件)可能要經過一段事件的延遲。觸發message事件後，傳遞給onmessage處理程序的事件物件包含以下三個方面的重要資訊。

　　data：作為postMessage()方法第一個參數傳入的字串資料

　　origin：發送訊息的文件所在的域，如」http://www.php.

：發送訊息的文件所在的域，如」http://www.php../” source：發送訊息的文檔的window物件的代理。這個代理物件主要用於在傳送上一則訊息的視窗中呼叫postMessage()方法。如果發送訊息的視窗來自同一個域名，那麼這個物件就是window。

　　接收到訊息後驗證發送視窗的來源是非常必要的。就像給postMessage()方法指定第二個參數，來確保瀏覽器不會把訊息傳送給未知頁面一樣，在onmessage()方法處理程序中偵測訊息來源可以確保傳入的訊息來自已知的頁面。基本的偵測模式如下

　　JavaScript程式碼

//获取框架中的window
var iframeWin = document.getElementById("iframe").contentWindow;
alert(iframeWin) // [object window]

//向框架中发送消息
iframeWin.postMessage("一个消息", "http://blog.csdn.net/lee_magnum")

　　Event.Source大多數情況下只是window物件的代理，不是實際的window物件。也就是說不能透過這個event.Source代理物件存取window物件的其他任何資訊。只能透過event.Source代理程式呼叫postMessage()方法。

　　XDM還有一個奇怪之處。首先，postMessage()的第一個參數最早是作為」永遠都是字串」來實現的。但後來這個參數的定義改了，改成允許傳入任何資料結構。但是並非所有瀏覽器都實現了這個變化。所以保險起見，使用postMessage()方法的時候，最好只傳字串。如果你想傳入結構化的數據，最好選擇先在要傳入的數據上呼叫JSON.stringify()，透過postMessage()方法傳入得到的字串，然後再在onmessage事件處理程序中呼叫JSON .parse()方法。

　　支援XDM的瀏覽器有Opera、IE8+、Safari 4+、Firefox 3.5+、Chrome、Android版Webkit和iOS版Safari。更多關於XDM的小東東可以去XDM官方頁面學習參考。 XDM的官方頁面是//m.sbmmt.com/

　　HTML5實戰與剖析之跨文檔訊息傳遞(iframe傳遞訊息)的相關知識就為大家介紹到這裡了，更多相關內容請關注PHP中文網（m.sbmmt.com）！