在网上冲浪时，各种网站之间的信息是互相独立的，为了保护我们的隐私！但是有时候，你也会觉得需要在这些壁垒之间传递点东西？HTML5出了个新方法叫postMessage，它就能帮我们解决这个问题。今天来聊聊我对postMessage的理解以及用它的一些心得体会。

postMessage的基本原理

127.0.0.1 www.postmessage1.com127.0.0.1 www.postmessage2.com

    
    
    
    <iframe id="ifr" src="http://www.postmessage2.com/page2.html">
    
        var text = document.getElementById('text'),
            send = document.getElementById('send'),
            ifr = window.frames[0];            //ifr = document.getElementById('ifr').contentWindow;
            //确保你使用的是iframe的contentWindow属性，而不是节点对象。
        send.addEventListener('click',function(){
            //主窗口postMessage发送消息给iframe子窗口。
            //子窗口通过监听message事件来获得消息
            ifr.postMessage(text.value,'http://www.postmessage2.com');
        })    

HTML5里有个叫PostMessage的家伙，就是用来帮不同来源的网页传信息的。简单说，就是两个门（端口），数据从这边进去那边出来。这样做不仅安全得多，也不用直接动DOM。

    
    
        //在iframe窗口中监听messages事件，并接收消息
        window.addEventListener('message',function(event){
            var p1 = document.getElementById('p1');            if(event.origin === 'http://www.postmessage1.com'){
                p1.innerHTML += event.data +"
";
            }
        })    
    
我是一个iframe
    

安全性考虑

PostMessage虽然好用，但是用不好就有危险！举个例子，如果我们不小心核实一下消息是从哪儿来的，那些坏心眼儿的网站就能骗你说一些假的东西，让你的电脑不安全。所以，用这个功能的时候，一定要把好关，确保消息是真的才行。

    
    
    
    
    
        var text = document.getElementById('text'),
            send = document.getElementById('send'),            // ifr = window.frames[0];
            ifr = document.getElementById('ifr').contentWindow;
        window.addEventListener('message', function(ev){
            if(ev.origin === 'http://www.postmessage2.com'){
                alert('从'+ ev.origin + '传过来的消息：' + ev.data);
            }
        });
        send.addEventListener('click',function(){
            //主窗口postMessage发送消息给iframe子窗口。
            //子窗口通过监听message事件来获得消息
            ifr.postMessage(text.value,'http://www.postmessage2.com');
        })    

实际应用案例

    
    
        //在iframe窗口中监听messages事件，并接收消息
        window.addEventListener('message',function(event){
            var p1 = document.getElementById('p1');            if (event.origin === 'http://www.postmessage1.com') {
                p1.innerHTML += "来自窗口" + event.origin + event.data+"
"
            }            //像主页面回送消息
            event.source.postMessage("你好，这里是：" + this.location, event.origin);
        });    
    
我是一个iframe
    

其实，咱们常常用postMessage这个家伙来搞第三方服务的连接！比如说，你在人人网看到有个牛逼的游戏，想看看好友都有谁玩儿过。要是没有postMessage的话，这种跨域数据传输就得费老大劲儿，用复杂的代理啥的。但现在好了，直接使postMessage就能轻松搞定，真是方便多了！

创建MessageChannel对象

搞个MessageChannel不就是搭积木似的搭出俩关联着的口儿！其中一个口儿就像邮差一样能把消息送到别的浏览器环境里，比如说送到另一个iframe里的小页面上去。这样一来，那些来自不同网站的页面之间就能互相聊天，操作起来也相当方便。

模拟跨域通信过程

要搞懂postMessage是怎么回事儿，就试试咱们来玩个小游戏！想象下，有两个网站，它们能好好聊聊天，一切都是因为我们的主页在中间帮忙牵线搭桥。每当网站1加载完后，它会“告诉”网站2，然后网站2收到信息后，又会把自己的想法反馈给网站1。

跨域通信的挑战与对策

虽然用postMessage可以进行跨域通信，但是实际做起来还是有困难的。比如怎么保障安全，怎么处理可能出现的错误啊等等。因此，咱们得制定出完善的安全措施和应急处理办法，这样才能保证跨域交流的稳定和安全。

var mc = new MessageChannel();

总结与展望

利用postMessage这个工具，我们就能在保证安全的情况下，轻易地让不同网站上的文件互通有无！这个功能不只是简化了跨站数据传输过程，还给网页应用开发提供了许多新思路。而且，随着网络安全技术越来越牛逼，postMessage肯定会在更多地方大显身手。

向读者提出的问题

你们有没遇到过跨域沟通问题？怎么搞定的？大家来说说自己的经验，一起来讨论下跨域通信的问题和解决方法。还有，别忘了给我点个赞！

    
    window.onload = function(){
        var mc, portMessageHandler;
        mc = new MessageChannel();
        portMessageHandler = function(event){
            alert(event.data);
        }        //向父页面发送消息以及端口port2
        window.parent.postMessage('（1）我已经等不及了，你好了吗？
', 'http://localhost/test1/main.html', [mc.port2]);        //定义本页面接收到消息后，应该做的处理
        mc.port1.addEventListener('message', portMessageHandler, false);        //打开本页面的端口，开始监听。。。
        mc.port1.start();
    }

    
    
通道通信实例
    
    
    
        window.onload = function(){
            var iframes, messageHandle;
            iframes = window.frames;
            messageHandle = function(event){
                if (event.ports.length > 0) {                    //如果有接收端口，将接收的端口与消息转发给iframe02
                    iframes[1].postMessage(event.data,'http://localhost/test2/iframe02.html', event.ports);
                }
            }            //监听第一个页面
            window.addEventListener('message',messageHandle,false);
        }