window.postMessage的基本概念
你听过window.postMessage没？这是HTML5的新功能，解决了网页之间互相传递信息的难题，而且即使地址不同也能用！想象下，就像在这个页面和另一个不想关的页面聊天一样，不用跳转，多方便！
聊聊嘛这个咋弄？超简单的！这边说话那边就立刻能看见了，接着就能回你的话。就是咱们小时候传纸条的那种感觉，不过现在是用网络罢了。发信息时别忘了告诉人家你在哪儿，收到的人最好也确认下对方的身份才敢安心回信哈。
创建数据发送端的步骤
首先，得找个地方发消息。简单点儿搞个新的网页窗口或者嵌入一个iframe框框就算成。比如说，我们可以写个代码，让这个小窗口每隔六秒发次消息。这样子就能把消息的速度控制好了，保证准时送达！
接着，咱们也得搞个接收器啥的，就跟等人家回消息似的。但别忘了，你浏览器得支持这个再说。如果不行，那就试试用jQuery或Dojo这种小助手帮帮手。
//弹出一个新窗口
var domain = 'http://scriptandstyle.com';
var myPopup = window.open(domain
+ '/windowPostMessageListener.html','myWindow');
//周期性的发送消息
setInterval(function(){
var message = 'Hello! The time is: ' + (new Date().getTime());
console.log('blog.local: sending message: ' + message);
//send the message and target URI
myPopup.postMessage(message,domain);
},6000);
//监听消息反馈
window.addEventListener('message',function(event) {
if(event.origin !== 'http://scriptandstyle.com') return;
console.log('received response: ',event.data);
},false);
确保消息的安全性
发消息记得用window.postMessage这样别人看不到我们说的啥了，嘿嘿~收到消息后要先看看是谁发的，如果来源可靠我们再大胆接收！
我再说最后一遍，要用iframe发信息的话，contentWindow这个属性可别弄错了。别想着乱改节点对象，不然会有可能出现安全隐患的
开发数据接收端的页面
咱们来学着做个能收发消息的网页！首先，网页里要有个能抓住”message”事件的东西，就像个小耳朵一样监听这个事件。然后，有新的消息来了，得先看看到底是谁发的，不要被坏人忽悠咯。
在想象你家有个私人邮箱时，就像是只有你信赖的朋友才能发给你信息，而其他烦人的垃圾邮件都被挡掉了。
//捕获iframe
var domain = 'http://scriptandstyle.com';
var iframe = document.getElementById('myIFrame').contentWindow;
//发送消息
setInterval(function(){
var message = 'Hello! The time is: ' + (new Date().getTime());
console.log('blog.local: sending message: ' + message);
//send the message and target URI
iframe.postMessage(message,domain);
},6000);
事件属性的重要性
记住，利用postMessage这个高大上的功能得搞懂什么叫source跟origin。source就像是说到哪儿发消息（比如窗口或者iframe）；但origin，就相当于你发消息时那个真实的出生地，没有它就不能生效。说白了，它们就像是给你的消息填好了邮寄地址.source是发件人地址,origin是收件人地址，通过这种方式确保消息安全到达目的地。
这个，可得小心点儿！首先得弄清数据是哪儿来的，像网上购物的话，要是不看看卖家信用度，那可不就傻眼！
实际应用案例分析
//响应事件
window.addEventListener('message',function(event) {
if(event.origin !== 'http://davidwalsh.name') return;
console.log('message received: ' + event.data,event);
event.source.postMessage('holla back youngin!',event.origin);
},false);
要是想做个网上聊天软件，目的肯定就是让大家畅所欲言。这时候，window.postMessage这招就很管用，信息传得像飞一样快，聊天也就更带劲了，而且还能防止隐私泄露！
这份活儿可不能让人聊天时紧张哦,要大家都轻松畅聊不外泄聊天内容，想想看，这可不就是办个热闹的聚会吗？咱们得让每个人都放心尽兴地玩起来。
总结与展望
看了这篇文章后，有木有觉得window.postMessage超好用？又方便又保险，保护咱们的数据隐私。相信等HTML5发展得更好点，window.postMessage就更广泛使用~
最后，我得问问你，做项目的时候有没有用过window.postMessage这个方法来提高传输效率和稳定性？在评论区告诉大家，分享文章的话别忘了点赞支持下~
评论0