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', 'https://b.example.org/');  

 

B页面的JavaScript代码如下

 

 

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