postMessage 消息传递

点击查看demo

前言

web开发了，除了前台与服务器交换数据，还有可能前台页面间需要进行数据传递，比如窗口间，页面和嵌套的iframe间。这些问题之前都有解决办法，但是现在html5引入的message的API可以更方便、有效、安全的解决这些问题。

postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信，可实现跨文本档、多窗口、跨域消息传递。

参数

postMessage( data , origin , [transfer] ),接受两个参数

1.data：​需要传递的数据，html5规范中该参数可以是JavaScript中的任意基本类型或可复制的对象，但是不是所有浏览器都能完美支持html5，所有还是用JSON将数据序列化比较好。

2.origin ：​​目标字符串参数，指明目标窗口。其值可以是字符串“*”（表示无限制）或者一个URI。

3.transfer：​是一串和message同时传递的Transferable对象。这些对象的所有权将被转移给消息的接收方，发送方不再保有所有权。

发送消息

otherWindow.postMessage( data , origin , [transfer] )

otherWindow为其他窗口的一个引用，比如iframe的contentWindow属性、执行window.open返回的窗口对象，或者是命名过或数值索引的window.frames.

接受消息

接收消息比较简单，只需要当前窗口监听message事件。

window.addEventListener('message' , function( event ){
} , false );

event为一个对象，它的属性有：

• data ： 数据字段
• origin ： 调用postMessage 时消息发送方窗口的origin
• source ： 对发送消息窗口对象的引用，可用来在具有不同origin的两个窗口间建立双向通信。