點評：window.postMessage允許多個 window/frame之間跨域傳遞數據和信息。下面為大家介紹下window.postMessage的工作原理,以及如何在FireFox，IE8+，Opera，Safari和Chrome中使用它

復制代碼

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(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);

復制代碼

// 監聽收到的信息.
bindEvent(window,'message',function(event) {
// 只接收特定域的消息
if(event.origin !== 'http://davidwalsh.name') return;
trace('監聽到信息: ',event.data);
// 回復消息
event.source.postMessage(""你好，小伙伴們，我已經收到消息了,event.origin);
},false);