HTML5的Message - 爱码网

Message API最大的优势是跨域发送消息。关于Message更多的信息请参考：

Message中一般常用的属性：

1、data 包含传入的消息，一般以会将传递的数据转化为字符串；

2、origin 返回消息来自的域，可以根据它来判断是否要处理消息，是非常基本的层级上的策略控制

3、source 相当于window.opener，这样就可以实现基本的消息互通了

这里有两个页面：index.html、postMessageTarget.html，位于同级目录（当然这两个文件可以放在不同的域中）

最终运行的实例效果如下图所示：

点击“postMessage”向iframe发出消息，iframe获取消息进行处理并回调父层文档对象的一个方法，详见代码。

index.html

postMessageTarget.html

有一点需要注意的是：

postMessage的目标源文档必须填写（即第二个参数，第一个参数则提交的数据），它必须与iframe对象的所在的域匹配，如果不匹配将会抛出一个安全性错误，阻止脚本继续执行。

如果目标源没有传入，JavaScript将出抛出一个错误。

上面的示例中仅仅是发送了字符串，如果需要发送非字符串数据，比如一个json对象。规范说明了当浏览器必须安全从一个域向另一个域发送数据时，会发生什么。

它说明了如何克隆，以及应该如何对待该数据。

但很遗憾，大多数浏览器是不支持，实际上，大多数浏览器只是把对象强制转转为一个字符串。这时候可以使用JSON.stringify和JSON.parse来处理了。

发送数据时，使用JSON.stringify把JSON对象转为字符串，在接收端使用JSON.parse将字符串转换为JSON对象。