基于HTML5实现跨文档通信
http://www.zy-yj.com 2017-11-13 09:09   来源: 未知  
  

  targetOrigin:发送消息的目标窗口的域名,它可以是一个 URI 或者是通配符 *。消息发送时,如果目标窗口的协议、主机地址或端口三者任意一项与 targetOrigin 的值不匹配,那么消息将不会被发送。这也是 HTML5 对于跨文档通信的一种安全防御措施。

  origin:调用 postMessage 时消息发送方窗口的 origin。这个字符串由协议、://、域名、:端口号拼接而成。

  source:对发送消息的窗口对象的引用,可以使用它来建立两个不同 origin 的窗口之间的双向通信。

  在本地建立 app.html 文件,内嵌一个位于云服务器上的跨域 iframe 页面 page.html,iframe 中包含一个按钮,在示例中,实现 iframe 页面和本地页面的跨文档通信。

  在 page.html 中,点击按钮触发点击事件,在点击事件的方法中,将会执行 postMessage 向 iframe 的父页面发送一条消息。在这里,window.parent 是 iframe 的父级页面,字符串 order 为将要发送的消息,目标窗口域名为通配符 *,表示任何域名。

  postMessage 是一个很实用的功能,但是使用不当也会许多安全问题,所以在使用的时候需要注意:

  2、处理 message 事件时,需要对发送消息的源 event.origin 进行校验 ,避免产生安全问题。

  HTML5 的 postMessage 不仅仅可以实现跨文档通信,跨域通信、多窗口通信、当前页和新窗口之间的通信都可以用如此简单的方式实现。如此强大的功能,那么其兼容性如何呢?如下:

  可以看出,postMessage 已经支持大部分浏览器,需要注意的是,在 IE8、9 和 Firefox6 及其以下版本只支持字符串作为传递的消息数据。