html api接口怎么使用教程,html5+ 的api怎么用

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)