html5 跨文件訊息傳輸範例探討_html5教學技巧

對窗口對象的message事件進行監聽

複製代碼

代碼如下:

window .addEventListener("message", function(event) {
// 處理程序代碼
}, false);

使用window物件的postMessage()方法向其他視窗發送訊息，方法的定義如下：

複製程式碼

程式碼如下:

該方法使用兩個參數：第一個參數為所發送的訊息文本，但也可以是任何JavaScript物件（透過JSON轉換物件為文本）；第二個參數為接收訊息的物件視窗的URL位址，可以在URL位址字串中使用通配符「*」指定全部位址，不過建議使用準確的URL位址。 otherwindow為要傳送視窗物件的引用，可以透過window.open()方法傳回該對象，或透過對window.frames陣列指定序號（index）或名字的方式來傳回單一frame所屬性的視窗物件。
示例

複製代碼

代碼如下:

跨域通訊範例

複製程式碼程式碼如下:

這是iframe的內容。

•透過對window物件的message事件進行監聽，可以接收訊息。

•透過存取message事件的origin屬性，可以取得訊息的傳送來源（本例中主頁面的傳送來源為“http://Lulingniu”，子頁面的傳送來源為“http://www.blue -butterfly.net”）。注意：發送來源與網站的URL位址不是一個概念，發送來源只包含網域名稱與連接埠號，為了不接收其他來源惡意發送過來的訊息，最好對發送來源做檢查。
•透過存取message事件的data屬性，可以取得訊息內容（可以是任何JavaScript對象，使用JSON）。
•使用postMessage()方法傳送訊息。
•透過存取message事件的source屬性，可以取得訊息傳送來源的視窗的代理物件。