亚洲免费不卡_在线视频精品_国产尤物精品_久久久久网址_久久精品91_欧美va天堂在线_狠狠入ady亚洲精品_亚洲午夜精品福利_国产精品草草_午夜精品久久99蜜桃的功能介绍

HTML5 的 window.postMessage 接口API 還沒有多少人了解。 window.postMessage允許多個 window/frame之間跨域傳遞數據和信息。實質上window.postMessage扮演了一個跨域Ajax請求的角色,當然，并不需要遠程服務器來協作。接下來將介紹window.postMessage的工作原理,以及如何在FireFox，IE8+，Opera，Safari和Chrome中使用它.

一、消息發送端

整個過程的第一步，是設定一個"消息源"。通過這個消息源，我們可以往新打開的window(或者iframe)發送window級別的數據(消息)。在下面的示例中，給新窗口發送消息的頻率是每6秒一次，并設置事件監聽來處理目標window返回的響應信息。

代碼如下:

function trace(message){

var infos = Array.prototype.slice.call(arguments,0).join(" ");

if("console" in window){

console.log(infos);

} else {

alert(infos);

}

};

// 創建彈出窗口

var domain = 'http://scriptandstyle.com';

var myPopup = window.open(domain + '/windowPostMessageListener.html','myWindow');

// 定時發送消息

setInterval(function(){

var message = '現在時間: ' + (new Date().getTime());

trace('數據源.發送的消息: ' + message);

myPopup.postMessage(message,domain); //發送數據信息,并設置目標URI

},6*1000);

function bindEvent(target,noOnEventName,handler){

if(window.addEventListener){

target.addEventListener(noOnEventName,handler);

} else if(window.attachEvent){

// IE 的監聽設置函數是attachEvent

target.attachEvent("on"+noOnEventName,handler);

} else {

target["on"+noOnEventName]=handler;

}

};

// 監聽收到的信息.

bindEvent(window,'message',function(event) {

// 只接收特定域的消息

if(event.origin !== 'http://scriptandstyle.com') return;

trace('收到的響應信息: ',event.data);

},false);

原文作者使用的是window.addEventListener方法來綁定事件，但是在IE下將會報錯(IE是window.attachEvent).當然，你可以創建函數來包裝事件，或者使用現成的類庫，比如MooTools或者jQuery/dojo來實現。

在上面的示例中，如果新窗口打開正常，那我們可以通過window對象的引用myPopup發送消息,并指定必須匹配的URI(協議、主機名、端口號)(如果用戶在子窗口中跳到其他頁面，則消息將不會發送).

同樣我們也綁定了事件處理函數來接收消息message。在此提醒，校驗message事件的origin(源)屬性很重要,因為可能接收到所有URI發給自己的消息，在多個frame交互時才不至于混淆。 校驗過origin之后，如何處理此消息，取決于你具體的業務和需求。

如果使用iframe的話，那么代碼如下：

代碼如下:

// 同樣創建另一個window(iframe,frame,frameset,top,window這些都屬于window相關的對象。)

var domain = 'http://scriptandstyle.com';

var iframe = document.getElementById('myIFrame').contentWindow;

// 循環發送消息，當然，也可以采用事件驅動之類的。。。

setInterval(function(){

var message = '現在時間: ' + (new Date().getTime());

trace('數據源.發送的消息: ' + message);

iframe.postMessage(message,domain); //發送數據信息,并設置目標URI

},6*1000);

確保能訪問到iframe對象的contentWindow 屬性——而不僅僅是iframe對象。

二、消息接收端

整個流程的第二步就是讓目標window就緒。目的窗口所要做的，就是監聽message事件，當然也要驗證事件的origin消息源。再次提醒：message事件處理函數可以接受任何域名發給他的消息，所以驗證origin以及只處理信任列表的message非常重要。

代碼如下:

// 監聽收到的信息.

bindEvent(window,'message',function(event) {

// 只接收特定域的消息

if(event.origin !== 'http://davidwalsh.name') return;

trace('監聽到信息: ',event.data);

// 回復消息

event.source.postMessage(""你好，小伙伴們，我已經收到消息了,event.origin);

},false);

上面的示例回復了響應信息給請求方。

message事件重要的屬性有：

source - 發送message的window/iframe對象

origin - 對應著發送消息window的URI (protocol, domain, and port, 如果有指定的話)

data - 具體的數據信息

對于消息系統以及校驗來說，這三個對象是必不可少的。

window.postMessage 使用注意事項

就和其他所有的Web技術一樣，如果使用不當(沒有驗證事件源)那危險性是顯而易見的。當然，安全性由你自己來保證。

window.postMessage 很像JavaScript技術中的PHP(哈哈，小廣告！).window.postMessage 算是一種很酷炫的技術，你覺得呢？