资讯专栏INFORMATION COLUMN

JavaScript HTML5脚本编程——“跨文档消息传递”的注意要点

TerryCai / 1155人阅读

摘要:跨文档消息传送,有时候也简称为,指的是来自不同域的页面间传递消息。接收到消息时,会触发对象的事件。接受到消息后验证发送窗口的来源是至关重要的。基本的检测模式如下。

跨文档消息传送(cross-document messaging),有时候也简称为XDM,指的是来自不同域的页面间传递消息。例如,www.wrox.com域中的一个页面与一个位于内嵌框架中的p2p.wrox.com域中的页面通信。

XDM的核心是

postMessage()方法。在HTML5规范中,除了XDM部分之外的其它部分也会提到这个方法名,但都是为了同一个目的:向另一个地方传递数据。对于XDM而言,“另一个地方”指的是包含在当前页面中的iframe元素,或者由当前页面弹出的窗口。

postMessage()方法接收两个参数:一条消息和一个表示消息接收方来自哪个域的字符串。

第二个参数对保障安全通信非常重要,可以防止浏览器把消息发送到不安全的地方。来看下面的例子。

var iframWindow = document.getElementById("myframe").contentWindow;
iframWindow.postMessage("A secret", "http://www.w3cmm.com");

接收到XDM消息时,会触发window对象的message事件。这个事件是以异步形式触发的,因此从发送消息到接受消息(触发接受窗口的message事件)可能要经过一段时间的延迟。触发message事件后,传递给

onmessage处理程序的事件对象

包含以下三方面的重要信息:

data:作为postMessage()第一个参数传入的字符串数据。

origin:发送消息的文档所在的域,例如“http://www.w3cmm.com”。

source:发送消息的文档的window对象的代理。这个代理对象主要用于在发送上一条消息的窗口中调用postMessage()方法。如果发送消息的窗口来自同一个域,那这个对象就是window。

接受到消息后验证发送窗口的来源是至关重要的。基本的检测模式如下。

EventUtil.addHandler(window, "message", function (event) {
    //确保发送消息的域是已知的域
    if (event.origin == "http://www.w3cmm.com") {
        //处理接收到的数据
        processMessage(event.data);
        //可选:向来源窗口发送回执
        event.source.postMessage("Received!", "http://p2p.w3cmm.com");
    }
});

还是要提醒大家,event.source大多数情况下只是window对象的代理,并非实际的window对象。不能通过这个代理对象访问window对象的其它任何信息。使用postMessage()时,最好还是只传字符串。最佳选择是先在要传入的数据上调用JSON.stringify(),通过postMessage()传入得到的字符串,然后再在onmessage事件处理程序中调用JSON.parse()

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/78633.html

相关文章

  • 《同源策略》简单介绍

    摘要:概述同源策略是对代码能够操作哪些内容的一条完整的安全限制,也是由提出的一个著名的安全策略。同源策略的目的同源政策的目的,是为了保证用户信息的安全,防止恶意的网站窃取数据。 [TOC] 1、概述 同源策略是对JavaScript代码能够操作哪些WEB内容的一条完整的安全限制,也是由Netscape提出的一个著名的安全策略。所谓同源简单来说就是三个相同,**1、域名相同2、协议相同3、端口...

    gggggggbong 评论0 收藏0
  • 《同源策略》简单介绍

    摘要:概述同源策略是对代码能够操作哪些内容的一条完整的安全限制,也是由提出的一个著名的安全策略。同源策略的目的同源政策的目的,是为了保证用户信息的安全,防止恶意的网站窃取数据。 [TOC] 1、概述 同源策略是对JavaScript代码能够操作哪些WEB内容的一条完整的安全限制,也是由Netscape提出的一个著名的安全策略。所谓同源简单来说就是三个相同,**1、域名相同2、协议相同3、端口...

    vpants 评论0 收藏0
  • htm5新特性(转)

    摘要:转自今天来谈谈前端面试中基本上每次一面都会被问到的一个问题,那就是的新特性了。元素,表示生成密匙。和通过设置和特性,可以将输入框的数值输入范围限定在最低值和最高值之间。一旦为某输入型控件设置了特性,那么此项必填,否则无法提交表单。 转自:http://hyuhan.com/2017/07/06/... 今天来谈谈前端面试中基本上每次一面都会被问到的一个问题,那就是html5的新特性了。...

    focusj 评论0 收藏0
  • 高程3总结#第16章HTML5脚本编程

    摘要:脚本编程跨文档消息传递跨文档消息传送,简称为,指的是来自不同域的页面间传递消息的核心是方法,在规范中,除了部分之外的其他部分也会提到这个方法名,但都是为了同一个目的,向另一个地方传递参数。第一个页面加载时为空 HTML5脚本编程 跨文档消息传递 跨文档消息传送,简称为XMD,指的是来自不同域的页面间传递消息 XMD的核心是postMessage()方法,在HTML5规范中,除了XDM...

    silvertheo 评论0 收藏0

发表评论

0条评论

TerryCai

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<