解决postMessage跨域问题

　　在HTML5中新增了postMessage方法，postMessage能够实现跨文档消息传输（Cross Document Messaging），Internet Explorer 8, Firefox 3, Opera 9, Chrome 3和 Safari 4都支持postMessage。

　　该方法能够经过绑定window的message事件来监听发送跨文档消息传输内容。

 

　　1. postMessage是HTML5 XMLHttpRequest Level 2中的API，且是为数很少能够跨域操做的window属性之一，它可用于解决如下方面的问题：

　　a.） 页面和其打开的新窗口的数据传递
　　b.） 多窗口之间消息传递
　　c.） 页面与嵌套的iframe消息传递
　　d.） 上面三个场景的跨域数据传递

　　2. postMessage用法：

postMessage(data,origin)方法接受两个参数

　　参数说明：

　　data： html5规范支持任意基本类型或可复制的对象，但部分浏览器只支持字符串，因此传参时最好用JSON.stringify()序列化。
　　origin： 协议+主机+端口号，也能够设置为"*"，表示能够传递给任意窗口，若是要指定和当前窗口同源的话设置为"/"。

　　

　　举例说明： 

　　　　两个页面之间进行数据传输，postMessage示例：

　　　　我启动了两个ip地址来表明不一样域名，页面t_hotnotes_list.html插入以下代码

<iframe id="iframe" src="http://10.73.154.73:8088/rbc/t/search_role.html" style="display:none;"></iframe>
    <script>       
        var iframe = document.getElementById('iframe');
        iframe.onload = function() {
            var data = {
                name: 'aym',
                type:'wuhan'
            };
            // 向domain2传送跨域数据
            iframe.contentWindow.postMessage(JSON.stringify(data), 'http://10.73.154.73:8088');
        };

        // 接受domain2返回数据，这边给延迟的缘由，由于同步传输时，页面不必定立马拿到数据，因此给延迟
        setTimeout(function(){
            window.addEventListener('message', function(e) {
                alert('data from domain2 sss ---> ' + e.data);
            }, false);
        },10)
    </script>

　　　　　　页面search_role.html插入以下代码：

<script>
        // 接收domain1的数据
        window.addEventListener('message', function(e) {
            console.log(e.data);

            var data = JSON.parse(e.data);
            if (data) {
                data.number = 16;
                data.age = 89;
                data.icon = 'sfafdafdafasdf';

                // 处理后再发回domain1
                window.parent.postMessage(JSON.stringify(data), 'http://10.73.154.72:8088');
            }
        }, false);
    </script>

　　当两个服务启动以后，咱们在浏览器中打开页面t_hotnotes_list.html

http://10.73.154.72:8088/rbc/t/t_hotnotes_list.html

　　获得以下图结果，t_hotnotes_list.html获得两个页面的数据