(四)跨文档消息发送(Cross-Document Messaging,简称XDM)
背景
正如在前面“跨域请求”一节所提到的,浏览器站点同源策略将阻止Web页面从其他域取得数据。这意味着,单个Web页面中的不同域无法彼此通信以提供更丰富的体验。Web站点通常是通过创建嵌套的IFrames并且检索通过URL传送的数据播送来克服这一约束的。Web站点克服这一策略的另一种方法是直接从其他域宿主脚本和其他资源文件。不过,这第二种方案仅允许单向通信。此外,这还是一种安全冒险,因为嵌入的脚本和资源具有与Web站点主机同样的权限,并且像cookies数据一样的方式访问用户的数据。
跨文档消息发送(XDM)提供了一个postMessage方法(不属于window对象),它允许不同的域根据相互的许可进行通信。与前面的方案相比,XDM提供一种简单得多而且具有更高性能的机制来实现双向式跨域通信。
API文档
方法
你可以使用postMessage方法把一个消息寄送到另一个域。这个方法使用一个数据字符串作为必需参数,而使用目标URL作为一个可选的参数。目标URL中包含你想把消息寄送到的URL的模式和域信息。当你在一个postMessage方法中包括目标URL字符串时,Internet Explorer仅仅把消息寄送到一个目标URL宿主的窗口。这将会避免其它域接收你的消息—如果用户导航离开此窗口的话。
事件
XDM中提供了下列事件:
•message—当另一个域把一条针对你的内容的消息发送来时将触发此事件。
属性
•domain—这个只读属性中包含一个有关于把消息发送到你的内容中的域的字符串。IE使用调用postMessage方法的文档的域设置这个属性。
•scheme—这个只读属性包含寄送消息的窗口相应的URL模式(如HTTPS或HTTP)。IE使用调用postMessage()方法的文档的模式设置这个属性。
•data—这个属性包含通过message事件寄送成功的数据字符串。
•source—这个属性被设置为window对象以接收一条返回的消息。
【注意】检查发送postMessage的域是一个良好的开发习惯,这样确保此域的确是期望接收数据的域。
下面展示了在位于两个域的两个窗口之间通信的例子:
在页面A中:
<document.onmessage = HandleMsg()>;
//2 把消息寄送到一个安全页面B
window.postMessage(“Hello world”, “https://lucernepublishing.com”)
在页面B中:
< document.onmessage = HandleMsg()>;
// 4 创建window的event对象
var e = window.event
//5 在接收到事件时进行域检查以确保消息
//来自于所期望的域
if (e.domain = “contoso.com”)
if (e.scheme = “HTTPS”)
// 6 从事件中检索数据
var data = e.data
// 7 把返回的消息发送到页面A
e.source.postMessage(“Hello”)
【提示】postMessage方法及相关联的属性和事件都遵循最新的W3C HTML 5工作草案。但是,postMessage方法的目标URL参数和模式属性尚未在HTML 5中通过。
(五)连接事件(Connectivity Events)
背景
Internet Explorer 8(仅针对于Vista版本的)允许Web页面通过window.navigator.onLine属性和online/offline事件来检索何时浏览器在线或离线。借助于这一信息并结合DOM存储对象,你可以针对离线情况提供更为丰富的支持。例如,如果一个用户刚刚登录到他的Live mail页面但是却中断了与服务器的连接,该页面总能够提示用户把一个草稿保存到DOM存储中并且允许该用户继续编辑邮件。当连接再次恢复时,脚本能够检索出此邮件并把它发送到服务器端。