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

问题：

做前端开发所遇到的一些消息传递，除了前端和后端消息传递之外，还有几个经常遇到的问题。

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

解决跨域办法：

• document.domain+iframe的设置，应用于主域相同而子域不同
• 利用iframe和location.hash，数据直接暴露在了url中，数据容量和类型都有限
• window.name 保存数据以及跨域 iframe 静态代理动态传输方案，充分的运用了window.name因为页面的url改变而name不改变的特性。

html5中最炫酷的API之一：

就是 跨文档消息传输Cross Document Messaging。高级浏览器Internet Explorer 8+, chrome，Firefox , Opera 和 Safari 都将支持这个功能。这个功能实现也非常简单主要包括接受信息的”message”事件和发送消息的”postMessage”方法。

postMessage()

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

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

1.data:要传递的数据，html5规范中提到该参数可以是JavaScript的任意基本类型或可复制的对象，然而并不是所有浏览器都做到了这点儿，部分浏览器只能处理字符串参数，所以我们在传递参数的时候需要使用JSON.stringify()方法对对象参数序列化，在低版本IE中引用json2.js可以实现类似效果。

2.origin：字符串参数，指明目标窗口的源，协议+主机+端口号[+URL]，URL会被忽略，所以可以不写，这个参数是为了安全考虑，postMessage()方法只会将message传递给指定窗口，当然如果愿意也可以建参数设置为"*"，这样可以传递给任意窗口，如果要指定和当前窗口同源的话设置为"/"。