首頁 > web前端 > H5教程 > html5 跨文件訊息傳輸範例探討_html5教學技巧

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

WBOY
發布: 2016-05-16 15:49:49
原創
1373 人瀏覽過

對窗口對象的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屬性,可以取得訊息傳送來源的視窗的代理物件。
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板