文档介绍：html5 postMessage 解决跨域、跨窗口消息传递一些麻烦事儿平时做 web 开发的时候关于消息传递,除了客户端与服务器传值还有几个经常会遇到的问题 1. 页面和其打开的新窗口的数据传递 2. 多窗口之间消息传递 3. 页面与嵌套的 iframe 消息传递 4. 上面三个问题的跨域数据传递 postMessage() 这些问题都有一些解决办法,但 html5 引入的 message 的 API 可以更方便、有效、安全的解决这些难题。 postMessage() 方法允许来自不同源的脚本采用异步方式进行有限的通信, 可以实现跨文本档、多窗口、跨域消息传递。 postMessage(data,origin) 方法接受两个参数 1. data : 要传递的数据, html5 规范中提到该参数可以是 JavaScript 的任意基本类型或可复制的对象, 然而并不是所有浏览器都做到了这点儿, 部分浏览器只能处理字符串参数, 所以我们在传递参数的时候需要使用 () 方法对对象参数序列化, 在低版本 IE 中引用 可以实现类似效果。 2. origin :字符串参数,指明目标窗口的源,协议+ 主机+ 端口号[+URL] , URL 会被忽略, 所以可以不写, 这个参数是为了安全考虑, postMessage() 方法只会将 message 传递给指定窗口,当然如果愿意也可以建参数设置为"*" ,这样可以传递给任意窗口,如果要指定和当前窗口同源的话设置为"/" 。/ <div style ="width:200px; float:left; margin-right:200px;border:solid 1px #333;"> <div id="color"> Frame Color </div > </div ><div ><iframe id="child" src ="/"></ iframe > </div > 我们可以在/ 通过 postMessage() 方法向跨域的 iframe 页面/ 传递消息 = function (){ [0].postMessage('getcolor',''); } 接收消息 上面的页面向 发送了消息,那么在 页面上如何接收消息呢,监听 window 的 message 事件就可以/ ('message', function (e){ if(!=) return ; var color=; (color,'*'); },false ); 这样我们就可以接收任何窗口传递来的消息了,为了安全起见,我们利用这时候的 MessageEvent 对象判断了一下消息源,MessageEvent 是一个这样的东东有几个重要属性 1. data :顾名思义,是传递来的 message 2. source :发送消息的窗口对象 3. orig