HTML5学习笔记(六)-Communication API

本章探讨用于构建实时（real-time）跨源（cross-origin）通信的两个重要模块：跨文档消息通信（Cross Document Messaging）和XMLHttpRequest Level 2.

一、跨文档消息通信

    出于安全方面的考虑，运行在同一浏览器中的框架、标签页、窗口间的通信一直都受到了严格的限制。然而现实中存在一些合理的让不同站点的内容能在浏览器内进行交互的需求。为了满足需求，浏览器厂商和标准制定机构一直同意引入一种新功能：跨文档消息通信。

    跨文档消息通信可以确保iframe、标签页、窗口间安全的进行跨源通信。它把postMessage API定义为发送消息的标准方式。

二、使用postMessage API

1、浏览器支持情况检测

在调用postMessage前，应该首先检测浏览器是否支持它。下面就是一种检测是否支持postMessage的方法：

if (typeof window.postMessage === "undefined") {
    //该浏览器不支持postMessage
}

 2、发送消息

通过调用目标页面window对象中的postMessage()函数可发送消息，代码如下：

window.postMessage("Hello, world", "portal.example.com");

 第一个参数包括要发送的数据，第二个参数是消息传送的目的地。要发送消息给iframe，可以再相应iframe的contentWindow中调用postMessage，代码如下：

document.getElementsByTagName("iframe")[0].contentWindow.postMessage("Hello, world", "chat.example.net");

 3、监听消息事件

接收消息时仅需在页面中增加一个事件处理函数。当某个消息到达时，通过检查消息的来源来决定是否对这条消息进行处理。

window.addEventListener("message", messageHandler, true);
function messageHandler(e) {
    switch(e.origin) {
        case "friend.example.com":
            //处理消息
            processMessage(e.data);
            break;
        default:
            //消息来源无法识别
            //消息被忽略
    }
}

 消息事件是一个拥有data（数据）和origin（源）属性的DOM事件。data属性是发送方传递的实际消息，而origin属性是发送来源。

源由规则（scheme）、主机（host）、端口（port）组成。

例如：由于规则不同（如https与http），所以https://www.example.com页面与http://www.example.com页面的源是不同的。

源的概念中不考虑路径。如：http://www.example.com/index.html与http://www.example.com/page2.html只是路径不同，他们是相同的源。

源在API和协议中以字符串的形式出现。

var originWhiteList = ["portal.example.com", "games.example.com", "www.example.com"];

function checkWhiteList(origin) {
    for (var i=0; i<originWhiteList.length; i++) {
        if (origin === originWhiteList[i]) {
            return true;
        }
    }
    return false;
}

function messageHandler(e) {
    if (checkWhiteList(e.origin)) {
        processMessage(e.data);
    } else {
        //忽略来自未知源的消息
    }
}

 postMessage API可以适用于同源和非同源通信，鉴于它的一致性，在同源文档间通信时也推荐适用postMessage。

三、XML HttpRequest Level 2

XML HttpRequest API使得Ajax技术的实现成为了可能。作为它的改进版，主要有一下两方面的改进：

• 跨源XMLHttpRequest;

        过去，XMLHttpRequest仅限于同源通信。XMLHttpRequest Level 2通过CORS（Cross Origin Resource Sharing，跨源资源共享）实现了跨源XMLHttpRequests。

• 进度事件（Progress events）

        XMLHttpRequest Level 2用了一个有意义的名字Progress进度来命名进度事件。通过为事件处理程序属性设置回调函数，可以实现对这些事件的监听。