postMessage解决跨域、跨窗口消息传递

1、平时做web开发的时候，除了客户端与服务端的数据传递，还会经常遇到前段页面间数据传递问题：

• 页面和其打开的新窗口的数据传递
• 多窗口之间消息传递
• 页面与嵌套的iframe消息传递
• 上面三个问题的跨域数据传递

2、postMessage

html5 引入的 message 的 API 可以更方便、有效、安全的解决这些难题。postMessage() 方法允许来自不同源的脚本采用异步方式进行有限的通信，可以实现跨文本档、多窗口、跨域消息传递。

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

• data：要传递的数据
  html5规范中提到该参数可以是JavaScript的任意基本类型或可复制的对象，然而并不是所有浏览器都做到了这点儿，部分浏览器只能处理字符串参数，所以我们在传递参数的时候需要使用JSON.stringify()方法对对象参数序列化
• origin：字符串参数
  指明目标窗口的源，协议+主机+端口号[+URL]，URL会被忽略，所以可以不写，这个参数是为了安全考虑，postMessage()方法只会将message传递给指定窗口，当然如果愿意也可以将参数设置为"*"，这样可以传递给任意窗口，如果要指定和当前窗口同源的话设置为"/"。

window.postMessage({
    "actionId":"todoName", // 目标页可以根据 actionId 做不同操作
    "info":JSON.stringify(params) // params 为要传递的json数据
},"*");  // origin 不建议设为 *，最好给定目标源

3、设置监听，接收数据

window.addEventListener("message",function(e){
    var origin = e.origin; // 消息来源
    var data = e.data; // 消息数据
    switch(data.actionId){
        case "todoName":
            if("协议://主机:端口号" === origin){
                alert(data.info);
            }
            break;
    }
});