HTML5 API --- 跨文档消息(cross-document message)简介

为什么引入跨文档消息机制？

现假设在一个网页中包含有一个Frame子页面，暂且称网页为主页面，Frame为子页面，一般情况下，主页面需要传递消息给子页面，完成对子页面进行控制，典型的应用就是在页面中嵌入广告或嵌入地图应用，广告或地图设计为一个子Frame，它需要接收父页面的控制消息，完成相应的广告画面变换或地图位置的跳转等功能。而这里通常情况下广告页面或地图页面都是由第三方服务商提供的，所以它们和主页面的往往不在同一域名下。这里我们在主页面中访问子Frame中的变量或DOM节点，因为浏览器为了安全对此做了限制，禁止不在同一域名下的Frame相互访问或修改彼此页面内的变量或属性，否则或抛出异常。

为了解决上述问题，HTML5引入了跨文档消息机制(cross-document message)，它允许多个页面相互共享数据，并且不暴露页面内部的DOM节点，这也保证了页面不会因为传递数据而遭到恶意攻击。

实例代码

假设页面A包含一个Frame，该Frame中包含另外一个页面B，它们处在不同的域名下，现在看看页面A和页面B如何实现跨文档的通信。

A页面中JavaScript代码如下

var o = document.getElementsByTagName('iframe')[0];
o.contentWindow.postMessage('Hello world', 'http://b.example.org/');

B页面的JavaScript代码如下

window.onmessage = function (event) {
if (event.origin == 'http://example.com') { // 可以过滤不需要的消息。
if (event.data == 'Hello world') {
event.source.postMessage('Hello', event.origin);
} else {
console.log(event.data);
}
}};