var xhr = new XMLHttpRequest(); if (typeof xhr.withCredentials === undefined) { //不支持跨源的XMLHttpRequest } else { //支持跨源的XMLHttpRequest }
1.3 使用postMessage API
提示 HTML5定义的MessageEvent接口也是HTML5 WebSockets和HTML5 WebWorkers的一部分。HTML5的通信功能用用于接受消息的API与MessageEvent接口是一致的。其他通信类API,如EventSource API和Web Workers,也都是使用MessageEvent接口来传递消息。
1.4 使用postMessage API创建应用
发送消息
通过调用目标页面window对象中的postMessage()函数可发送消息,代码如下:
JavaScript Code复制内容到剪贴板
window.postMessage("Hello, world", "porta");
第一个参数包括要发送的数据,第二个参数是消息传送的目的地。要发送消息给iframe,可以再相应iframe的contentWindow中调用postMessage,代码如下:
JavaScript Code复制内容到剪贴板
document.getElementsByTagName("iframe")[0].contentWindow.postMessage("Hello, world", "cha");
监听消息事件
接收消息时仅需在页面中增加一个事件处理函数。当某个消息到达时,通过检查消息的来源来决定是否对这条消息进行处理。
JavaScript Code复制内容到剪贴板
window.postMessage("Hello, world", "porta");
消息事件是一个拥有data(数据)和origin(源)属性的DOM事件。data属性是发送方传递的实际消息,而origin属性是发送来源。
源由规则(scheme)、主机(host)、端口(port)组成。
例如:由于规则不同(如https与http),所以页面与页面的源是不同的。
源的概念中不考虑路径。如:与只是路径不同,他们是相同的源。
源在API和协议中以字符串的形式出现。
JavaScript Code复制内容到剪贴板
var originWhiteList = ["porta", "game", ""]; function checkWhiteList(origin) { for (var i=0; i
postMessage API可以适用于同源和非同源通信,鉴于它的一致性,在同源文档间通信时也推荐适用postMessage。
2 XMLHttpRequest Level2
作为XMLHttpRequest的改进版,XMLHttpRequest Level2在功能上有了很大的改进。主要集中在两个方面:
(1)跨源XMLHttpRequests;
(2)进度事件(Progress events)