HTML5 web通信(跨文档通信通道通信)简介.docxVIP

HTML5 web通信（跨文档通信/通道通信）简介一、简单概要web通信（洋名：web messaging）是一种文档中独立的浏览上下文间的DOM不会被恶意的跨域脚本暴露数据分享方式。得得得，术语啊什么的，比看到凤姐还头疼。有必要把上面一句话拆开讲：web通信是一种数据分享方式（有屁话之嫌）；通信的主体是“浏览上下文”（这是纳尼？）；哦，“浏览上下文”呢是“一个将?Document?对象呈现给用户的环境”，你可以近似理解为平常我们看到的某个页面所处的环境；web通信不会有DOM被恶意暴露的危险；目前应用比较多的就是iframe之间的通信（这是我自个儿额外加的）。当我们谈论web通信的时候，实际上谈论的是两个略有不同的系统：跨文档通信(cross-document messaging)和通道通信(channel messaging)。跨文档通信就是我们国内更为熟知的HTML5 window.postMessage()应用的那种通信；通道通信也被称为”MessageChannel”. 伴随着server-sent事件以及web sockets, 跨文档通信和通道通信成为HTML5 通信接口“套件”中有用的一部分。浏览器支持(至2012-02-27)web通信已经被Opera, Chrome, Safari支持，尽管Safari≤ 5.1.2的版本有bug. IE8 部分支持跨文档通信：只能和iframe通信，不支持新窗口通信。IE10 将支持通道通信。FireFox目前支持跨文档信息，但是并不支持通道通信。二、通信事件这里要先介绍下message事件对象。为何？因为，无论是跨文档通信(cross-document messaging)、通道通信(channel messaging)、服务器发送事件(server-sent events)或是网络套接字(web sockets)都要执行message事件。因此理解之时很有帮助滴。就像是你无论要娶志林姐还是“风叉变人”姐，都要过你妈这关，因此，了解你妈的偏好就很有帮助啦！Message事件的定义可参见这里（此链接建议不用点，英文+术语→大头儿子），该事件包含5个只读属性：data包含任意字符串数据，由原始脚本发送origin一个字符串，包含原始文档的方案、域名以及端口(如：http://domain.example:80)lastEventId一个字符串，包含了当前的消息事件的唯一标识符。source原始文件的窗口的引用。更确切地说，它是一个WindowProxy对象。ports一个数组，包含任何MessagePort对象发送消息。在跨文档通信和通道通信中，lastEventId的值一般是个空字符串；lastEventId应用在服务器端发送事件上。发送信息中如果没有ports, 则ports属性值就是个长度为0的数组。MessageEvent继承DOM事件接口，且属性共享。然而，通信事件并没有冒泡，不能取消，也没有默认行为。三、跨文档通信跨文档通信的使用跟我们平时实际生活中的邮件接收等类似。发送→接收。文字化的描述不利于理解。所以，先从一个例子开始吧。例子很简单，页面上两个iframe框架，左侧的可以输入信息，点击确认按钮后，输入的信息可以在右侧的iframe中显示。您可以狠狠地点击这里：两个iframe之间的跨文档通信demo例如，我们在左侧输入“白静被害”，点击按钮后，右侧就有对应显示，参见下面截图：上面已经提过，跨文档通信被IE8+浏览器支持，因此，本demo在IE8浏览器下也是有效果滴：OK，上面例子简单很，发送以及接收！发送核心JS代码如下：window.parent.frames[1].postMessage(message, *);说明：window.parent.frames[1]指的就是demo正页中的第二个iframe. 然后使用postMessage方法发送数据。postMessage方法支持两个参数，具体参考下表：message发送的数据targetOrigin发送数据的来源。其实还有个可选的第三参数transfer，不过用在通道通信中，这个放在后面讲。postMessage方法中的message参数不仅仅可以是字符串，结构对象、数据对象(如：File和ArrayBuffer)或是数组都是可以的。很厉害吧，不过遗憾的是，IE8/IE9/FireFox3.6及其以下版本只支持字符串数据。targetOrigin参数指接收文档的来源。除非接收信息浏览上下文来源于提供的targetOrigin中的一个匹配，否则浏览器是不会发送消息的。当然，您可以像上面的demo一样，绕开这类限制，直接使用*通配符，但显然，这是把主公暴露在反贼的刀口之下啊（不安全的信息泄露）。本dem