recursal/MDN huggingface dataset:
progress 事件
===========

**`progress`** 事件会在请求接收到数据的时候被周期性触发。

|  |  |
| --- | --- |
| Bubbles | No |
| Cancelable | No |
| Interface | `ProgressEvent` |
| Event handler property | `onprogress` |

示例
--

### 在线示例

#### HTML


```html
<div class="controls">
  <input
 class="xhr success"
 type="button"
 name="xhr"
 value="Click to start XHR (success)" />
  <input
 class="xhr error"
 type="button"
 name="xhr"
 value="Click to start XHR (error)" />
  <input
 class="xhr abort"
 type="button"
 name="xhr"
 value="Click to start XHR (abort)" />
</div>

<textarea readonly class="event-log"></textarea>
```


```
.event-log {
  width: 25rem;
  height: 4rem;
  border: 1px solid black;
  margin: 0.5rem;
  padding: 0.2rem;
}

input {
  width: 11rem;
  margin: 0.5rem;
}
```


#### JS


```js
const xhrButtonSuccess = document.querySelector(".xhr.success");
const xhrButtonError = document.querySelector(".xhr.error");
const xhrButtonAbort = document.querySelector(".xhr.abort");
const log = document.querySelector(".event-log");

function handleEvent(e) {
  log.textContent =
    log.textContent + `${e.type}: ${e.loaded} bytes transferred\n`;
}

function addListeners(xhr) {
  xhr.addEventListener("loadstart", handleEvent);
  xhr.addEventListener("load", handleEvent);
  xhr.addEventListener("loadend", handleEvent);
  xhr.addEventListener("progress", handleEvent);
  xhr.addEventListener("error", handleEvent);
  xhr.addEventListener("abort", handleEvent);
}

function runXHR(url) {
  log.textContent = "";

  const xhr = new XMLHttpRequest();
  addListeners(xhr);
  xhr.open("GET", url);
  xhr.send();
  return xhr;
}

xhrButtonSuccess.addEventListener("click", () => {
  runXHR("dgszyjnxcaipwzy.jpg");
});

xhrButtonError.addEventListener("click", () => {
  runXHR("https://somewhere.org/i-dont-exist");
});

xhrButtonAbort.addEventListener("click", () => {
  runXHR("dgszyjnxcaipwzy.jpg").abort();
});
```


#### 结果

规范
--

| Specification |
| --- |
| XMLHttpRequest Standard # event-xhr-progress |
| XMLHttpRequest Standard # handler-xhr-onprogress |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* 相关事件：`loadstart`、`load`、`loadend`、`error`、`abort`
* 监测进度
XMLHttpRequest.channel
======================

创建请求的时候，XMLHttpRequest.channel 是一个被对象使用的 `nsIChannel`。如果管道（channel）还没被创建的话，它的值是 `null`。在一个 multi-part 请求案例中，它是初始化的管道，不是 multi-part 请求中的不同部分。

**需要权限提升。**
XMLHttpRequest.responseXML
==========================

**XMLHttpRequest.responseXML** 属性是一个只读值，它返回一个包含请求检索的 HTML 或 XML 的`Document`，如果请求未成功，尚未发送，或者检索的数据无法正确解析为 XML 或 HTML，则为 null。默认是当作“text / xml”来解析。当 `responseType` 设置为“document”并且请求已异步执行时，响应将被当作“text / html”来解析。`responseXML` 对于任何其他类型的数据以及 `data:` URLs 为 null。

**备注：** `responseXML` 在这个属性的历史堪称神器，它可以同时在 HTML 和 XML 中工作

如果服务器没有明确指出 `Content-Type` 头是 `"text/xml"` 还是 `"application/xml"`, 你可以使用`XMLHttpRequest.overrideMimeType()` 强制 `XMLHttpRequest` 解析为 XML。

语法
--
```

var data = XMLHttpRequest.responseXML;
```

### 值

`Document` 中包含从 `XMLHttpRequest` 中收到的 HTML 节点或解析后的 XML 节点，也可能是在没有收到任何数据或数据类型错误的情况下返回的 null。

### 例外

`InvalidStateError`

`responseType` 既不是 `"document"` 也不是空字符串 (接收的数据应是 XML 或 HTML)。

示例
--


```js
var xhr = new XMLHttpRequest();
xhr.open("GET", "/server", true);

// 如果已指明，responseType 必须是空字符串或 "document"
xhr.responseType = "document";

// overrideMimeType() 用来强制解析 response 为 XML
xhr.overrideMimeType("text/xml");

xhr.onload = function () {
  if (xhr.readyState === xhr.DONE) {
    if (xhr.status === 200) {
      console.log(xhr.response);
      console.log(xhr.responseXML);
    }
  }
};

xhr.send(null);
```

规范
--

| Specification |
| --- |
| XMLHttpRequest Standard # the-responsexml-attribute |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

了解更多
----

* `XMLHttpRequest`
* `XMLHttpRequest.response`
* `XMLHttpRequest.responseType`
XMLHttpRequest.mozSystem
========================

**`mozSystem`** is a boolean. If true, the same origin policy is not enforced on the request.

mozSystem 是一个布尔值。如果它被设置为 true，那么在请求时就不会强制要求执行同源策略（Same Origin Policy）。
XMLHttpRequest.overrideMimeType()
=================================

XMLHttpRequest 的 **`overrideMimeType`** 方法是指定一个 MIME 类型用于替代服务器指定的类型，使服务端响应信息中传输的数据按照该指定 MIME 类型处理。例如强制使流方式处理为"text/xml"类型处理时会被使用到，即使服务器在响应头中并没有这样指定。此方法必须在 send 方法之前调用方为有效。

Syntax
------
```

XMLHttpRequest.overrideMimeType(mimeType)
```

### Parameters

`mimeType`

一个 `DOMString` 指定具体的 MIME 类型去代替有服务器指定的 MIME 类型。如果服务器没有指定类型，那么 `XMLHttpRequest` 将会默认为 `"text/xml"`.

### Return value

`undefined`.

Example
-------

这个样例指定 Content-Type 为“text/plain",为接受的数据重写 ContentType

**备注：** 如果服务器没有指定一个`Content-Type` 头，`XMLHttpRequest` 默认 MIME 类型为`"text/xml"`. 如果接受的数据不是有效的 XML，将会出现格”格式不正确“的错误。你能够通过调用 `overrideMimeType()` 指定各种类型来避免这种情况。


```js
// Interpret the received data as plain text

req = new XMLHttpRequest();
req.overrideMimeType("text/plain");
req.addEventListener("load", callback, false);
req.open("get", url);
req.send();
```

规范
--

| Specification |
| --- |
| XMLHttpRequest Standard # the-overridemimetype()-method |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* 使用 XMLHttpRequest
* `XMLHttpRequest.responseType`
XMLHttpRequest.onreadystatechange
=================================

只要 `readyState` 属性发生变化，就会调用相应的处理函数 (en-US)。这个回调函数会被用户线程所调用。**`XMLHttpRequest.onreadystatechange`** 会在 `XMLHttpRequest` 的`readyState` 属性发生改变时触发 `readystatechange` 事件的时候被调用。

**警告：** 这个方法不该用于同步的 requests 对象，并且不能在内部 (C++) 代码中使用。

当一个 `XMLHttpRequest` 请求被 abort() 方法取消时，其对应的 `readystatechange` 事件不会被触发。

**备注：** UPDATE: 在下面的浏览器版本中会触发 (Firefox 51.0.1, Opera 43.0.2442.991, Safari 10.0.3 (12602.4.8), Chrome 54.0.2840.71, Edge, IE11). 例子在 here - 重新加载几次页面即可。

语法
--
```

XMLHttpRequest.onreadystatechange = callback;
```

### 取值

* 当 `readyState` 的值改变的时候，`callback` 函数会被调用。
示例
--


```js
var xhr = new XMLHttpRequest(),
  method = "GET",
  url = "https://developer.mozilla.org/";

xhr.open(method, url, true);
xhr.onreadystatechange = function () {
  if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
xhr.send();
```

规范
--

| Specification |
| --- |
| XMLHttpRequest Standard # event-xhr-readystatechange |
| XMLHttpRequest Standard # handler-xhr-onreadystatechange |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
XMLHttpRequest.status
=====================

只读属性 **`XMLHttpRequest.status`** 返回了 `XMLHttpRequest` 响应中的数字状态码。`status` 的值是一个`无符号短整型`。在请求完成前，`status` 的值为 `0`。值得注意的是，如果 XMLHttpRequest 出错，浏览器返回的 status 也为 0。status 码是标准的 HTTP status codes。举个例子，`status` `200` 代表一个成功的请求。如果服务器响应中没有明确指定 status 码，`XMLHttpRequest.status` 将会默认为 `200`。例子
--


```js
var xhr = new XMLHttpRequest();
console.log("UNSENT", xhr.status);

xhr.open("GET", "/server", true);
console.log("OPENED", xhr.status);

xhr.onprogress = function () {
  console.log("LOADING", xhr.status);
};

xhr.onload = function () {
  console.log("DONE", xhr.status);
};

xhr.send(null);

/\*\*
 \* 输出如下：
 \*
 \* UNSENT（未发送）0
 \* OPENED（已打开）0
 \* LOADING（载入中）200
 \* DONE（完成）200
 \*/
```

规范
--

| Specification |
| --- |
| XMLHttpRequest Standard # the-status-attribute |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

其他相关资料
------

* HTTP 响应代码（HTTP response codes）列表
* HTTP
DecompressionStream.readable
============================

`DecompressionStream` 接口的 **`readable`** 只读属性返回 `ReadableStream`。

值
-

一个 `ReadableStream`。

示例
--

以下示例从 `DecompressionStream` 返回 `ReadableStream`。


```js
let stream = new DecompressionStream("gzip");
console.log(stream.readable); //一个 ReadableStream
```

规范
--

| Specification |
| --- |
| Streams Standard # dom-generictransformstream-readable |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
DecompressionStream.writable
============================

`DecompressionStream` 接口的 **`writable`** 属性返回 `WritableStream`。

值
-

一个 `WritableStream`。

示例
--

以下示例从 `DecompressionStream` 返回 `WritableStream`。


```js
let stream = new DecompressionStream("gzip");
console.log(stream.writeable); //一个 WritableStream
```

规范
--

| Specification |
| --- |
| Streams Standard # dom-generictransformstream-writable |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
DecompressionStream()
=====================

**`DecompressionStream()`** 构造函数创建一个新的 `DecompressionStream`，该对象用于解压数据流。

语法
--


```js
new DecompressionStream(format)
```

### 参数

`format`

以下允许的解压格式之一：

* `"gzip"`
* `"deflate"`
* `"deflate-raw"`

异常
--

`TypeError`

如果传递给构造函数的格式是不支持的则抛出。

示例
--

在此示例中，使用 gzip 对 blob 解压缩。


```js
const ds = new DecompressionStream("gzip");
const decompressedStream = blob.stream().pipeThrough(ds);
```

规范
--

| Specification |
| --- |
| Compression Streams # dom-decompressionstream-decompressionstream |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
FileSystemHandle：requestPermission() 方法
=======================================

**安全上下文:** 此项功能仅在一些支持的浏览器的安全上下文（HTTPS）中可用。

**实验性:** **这是一项实验性技术**  
在将其用于生产之前，请仔细检查浏览器兼容性表格。

`FileSystemHandle` 接口的 **`queryPermission()`** 方法用于为文件句柄请求读取或读写权限。

语法
--


```js
requestPermission(fileSystemHandlePermissionDescriptor)
```

### 参数

FileSystemHandlePermissionDescriptor 可选

一个对象，指定需要查询的权限模式，包含以下选项：

* `'mode'`：可以是 `'read'` 或 `'readwrite'`。

### 返回值

`PermissionStatus.state` (en-US)，值为 `'granted'`、`'denied'` 或 `'prompt'` 三者之一。

### 异常

`TypeError`

如果没有指定参数或者 `mode` 的值不是 `'read'` 或 `'readwrite'`，则抛出此异常。

示例
--

以下异步函数会在句柄没有获得授权时请求权限。


```js
// fileHandle 是一个 FileSystemFileHandle
// withWrite 是一个布尔值，如果要求写入则需传入 true

async function verifyPermission(fileHandle, withWrite) {
  const opts = {};
  if (withWrite) {
    opts.mode = "readwrite";
  }

  // 检查是否已经拥有相应权限，如果是，返回 true。
  if ((await fileHandle.queryPermission(opts)) === "granted") {
    return true;
  }

  // 为文件请求权限，如果用户授予了权限，返回 true。
  if ((await fileHandle.requestPermission(opts)) === "granted") {
    return true;
  }

  // 用户没有授权，返回 false。
  return false;
}
```

规范
--

| Specification |
| --- |
| File System Access # api-filesystemhandle-requestpermission |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* 文件系统 API
* 文件系统访问 API：简化本地文件访问
FileSystemHandle：kind 属性
========================

**安全上下文:** 此项功能仅在一些支持的浏览器的安全上下文（HTTPS）中可用。

`FileSystemHandle` 接口的 **`kind`** 只读属性返回条目的类型。如果关联的条目是一个文件，则此值为 `'file'`，否则为 `'directory'`。其用于在遍历目录内容时区分文件和目录。

值
-

可能为以下字符串值：

* `'file'`：若句柄是一个 `FileSystemFileHandle`。
* `'directory'`：若句柄是一个 `FileSystemDirectoryHandle`。
示例
--

下面的函数允许用户在文件选择器选择一个文件，然后测试返回的句柄是一个文件还是一个目录。


```js
// 存放对文件句柄的引用
let fileHandle;

async function getFile() {
  // 打开文件选择器
  [fileHandle] = await window.showOpenFilePicker();

  if (fileHandle.kind === "file") {
    // 运行针对文件的代码
  } else if (fileHandle.kind === "directory") {
    // 运行针对目录的代码
  }
}
```

规范
--

| Specification |
| --- |
| File System Standard # ref-for-dom-filesystemhandle-kind① |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* 文件系统 API
* 文件系统访问 API：简化本地文件访问
FileSystemHandle：remove() 方法
============================

**安全上下文:** 此项功能仅在一些支持的浏览器的安全上下文（HTTPS）中可用。

**实验性:** **这是一项实验性技术**  
在将其用于生产之前，请仔细检查浏览器兼容性表格。

**非标准:** 该特性是非标准的，请尽量不要在生产环境中使用它！

`FileSystemHandle` 接口的 **`remove()`** 方法用于向底层文件系统请求移除句柄所代表的的条目。

`remove()` 方法允许你用对应的句柄直接移除一个文件或一个目录。如果没有这个方法，你就必须先获取句柄的父目录，然后调用其上的 `FileSystemDirectoryHandle.removeEntry()` 来移除文件或目录。

你也可以在源私有文件系统的根目录上调用 `remove()` 来清除其内容，此后一个新的空源私有文件系统会被创建。

语法
--


```js
remove(options)
```

### 参数

`options` 可选

一个对象，指定移除操作的选项，可包含以下属性：

`recursive` 可选

布尔值，默认为 `false`。当设为 `true` 并且条目是一个目录时，目录的内容将会被递归移除。


### 返回值

一个 `Promise` 对象，会兑现一个 `undefined` 值。

### 异常

`InvalidModificationError` `DOMException`

如果 `recursive` 被设为 `false` 并且要移除的条目是包含子项的目录时，会抛出此异常。

`NoModificationAllowedError` `DOMException`

如果浏览器无法获得该条目的独占锁定，则抛出此异常。

`NotAllowedError` `DOMException`

如果 `PermissionStatus` (en-US) 不为 `granted`，抛出此异常。

`NotFoundError` `DOMException`

如果找不到该条目则抛出此异常。

示例
--

我们的 FileSystemHandle.remove() 演示（参阅源代码）是个用于创建文件的应用。你可以在 `<textarea>` 中输入文本然后按下“Save file” `<button>`，然后应用会打开一个文件选择器以允许你将输入的文本保存到你在你的本地文件系统中选择的文件。你还可以删除你创建的文件。

这个应用不能让你查看创建出的文件的内容，也无法在重载或关闭页面后仍然保持与底层文件系统同步。也就是说，如果你不在重载或关闭标签页前删除你创建的文件，那这些文件仍然会存留于你的文件系统中。

如果你要创建一个新文件，所出现的文件选择器、文件句柄以及文件本身都是通过 `window.showSaveFilePicker()` 创建的。文件的文本则是通过 `FileSystemFileHandle.createWritable()` 写入的。

一旦在文件系统上创建了一个文件，应用便会创建一个条目（参阅源代码中的 `processNewFile()`）：

* 对文件句柄的引用存放在一个名为 `savedFileRefs` 的数组中，以便此后引用。
* UI 中的“Saved files”标题下会添加一个列表项，上面会显示文件名，旁边还有一个“Delete”按钮。

当按下“Delete”按钮时，会执行 `deleteFile()` 函数，其内容如下：


```js
async function deleteFile(e) {
  for (const handle of savedFileRefs) {
    if (handle.name === e.target.id + ".txt") {
      await handle.remove();
      savedFileRefs = savedFileRefs.filter(
        (handle) => handle.name !== e.target.id + ".txt",
      );
      e.target.parentElement.parentElement.removeChild(e.target.parentElement);
    }
  }
}
```


流程如下：

1. 对于每个保存在 `savedFileRefs` 数组中的文件句柄，我们会检查其名称是否与触发事件的按钮的 `id` 属性相符。
2. 当找到一个相符项时，我们在对应句柄上执行 `FileSystemHandle.remove()` 以从底层文件系统中移除文件。
3. 我们也要从 `savedFileRefs` 数组中移除对应的句柄。
4. 最后，我们从 UI 中移除与该文件相关的列表项。
规范
--

#### No specification found

No specification data found for `api.FileSystemHandle.remove`.  
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* 文件系统 API
* FileSystemHandle.remove() 演示
FileSystemHandle：name 属性
========================

**安全上下文:** 此项功能仅在一些支持的浏览器的安全上下文（HTTPS）中可用。

`FileSystemHandle` 接口的 **`name`** 只读属性返回句柄所代表的条目的名称。

值
-

一个字符串。

示例
--

下面的函数允许用户在文件选择器选择一个文件并获取句柄的 `name` 属性。


```js
// 存放对文件句柄的引用
let fileHandle;

async function getFile() {
  // 打开文件选择器
  [fileHandle] = await window.showOpenFilePicker();

  const fileName = fileHandle.name;
}
```

规范
--

| Specification |
| --- |
| File System Standard # ref-for-dom-filesystemhandle-name① |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* 文件系统 API
* 文件系统访问 API：简化本地文件访问
FileSystemHandle：isSameEntry() 方法
=================================

**安全上下文:** 此项功能仅在一些支持的浏览器的安全上下文（HTTPS）中可用。

`FileSystemHandle` 接口的 **`isSameEntry()`** 方法用于比对两个句柄以查看两者关联的条目（文件或目录）是否相符。

语法
--


```js
isSameEntry(fileSystemHandle)
```

### 参数

`FileSystemHandle`

需要与调用此方法的句柄进行匹配的 `FileSystemHandle`。

### 返回值

返回一个 `Boolean` 值，如果条目相符则此值为 `true`。

### 异常

不抛出异常。

示例
--

以下函数将单个条目与条目数组进行比对，返回包含不相符条目的新数组。


```js
function removeMatches(fileEntry, entriesArr) {
  let newArr = entriesArr.filter((entry) => !fileEntry.isSameEntry(entry));

  return newArr;
}
```

规范
--

| Specification |
| --- |
| File System Standard # api-filesystemhandle-issameentry |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* 文件系统 API
* 文件系统访问 API：简化本地文件访问
FileSystemHandle：queryPermission() 方法
=====================================

**安全上下文:** 此项功能仅在一些支持的浏览器的安全上下文（HTTPS）中可用。

**实验性:** **这是一项实验性技术**  
在将其用于生产之前，请仔细检查浏览器兼容性表格。

`FileSystemHandle` 接口的 **`queryPermission()`** 方法用于查询当前句柄目前的权限状态。

语法
--


```js
queryPermission(fileSystemHandlePermissionDescriptor)
```

### 参数

FileSystemHandlePermissionDescriptor 可选

一个对象，指定需要查询的权限模式，包含以下选项：

* `'mode'`：可以是 `'read'` 或 `'readwrite'`。

### 返回值

`PermissionStatus.state` (en-US)，值为 `'granted'`、`'denied'` 或 `'prompt'` 三者之一。

如果此方法返回了“prompt”，则站点必须在对句柄进行任何操作前调用 requestPermission() 请求授权。如果此方法返回了“denied”，则任何操作都会被拒绝。从本地文件系统句柄构造器返回的句柄通常会在初始时对只读权限状态返回“granted”。但是，除开用户收回了权限的情况，从 IndexedDB 获取的句柄也有可能会返回“prompt”。

### 异常

`TypeError`

如果 `mode` 指定的值不是 `'read'` 或者 `'readwrite'`，则抛出此异常。

示例
--

以下异步函数会在用户对文件句柄授予了只读或读写权限时返回 `true`，若无权限则请求权限。


```js
// fileHandle 是一个 FileSystemFileHandle
// withWrite 是一个布尔值，如果要求写入则需传入 true

async function verifyPermission(fileHandle, withWrite) {
  const opts = {};
  if (withWrite) {
    opts.mode = "readwrite";
  }

  // 检查是否已经拥有相应权限，如果是，返回 true。
  if ((await fileHandle.queryPermission(opts)) === "granted") {
    return true;
  }

  // 为文件请求权限，如果用户授予了权限，返回 true。
  if ((await fileHandle.requestPermission(opts)) === "granted") {
    return true;
  }

  // 用户没有授权，返回 false。
  return false;
}
```

规范
--

| Specification |
| --- |
| File System Access # api-filesystemhandle-querypermission |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* 文件系统 API
* 文件系统访问 API：简化本地文件访问
File and Directory Entries API support in Firefox
=================================================

**非标准:** 该特性是非标准的，请尽量不要在生产环境中使用它！

创建原始文件系统 API 是为了让浏览器实现对访问用户存储设备上沙箱虚拟文件系统的支持。标准化规范的工作早在 2012 年就被放弃了，但到那时，谷歌 Chrome 包含了自己的 API 实现。随着时间的推移，许多流行的站点和 Web 应用程序开始使用它，通常不提供任何退回到标准 API 的方法，甚至在使用之前也没有检查 API 是否可用。相反，Mozilla 选择实现其他 api，这些 api 可以用来解决许多相同的问题，比如IndexedDB;查看博客文章，为什么 Firefox 中没有文件系统 API?更多的见解。

这导致许多流行的网站无法在 Chrome 以外的浏览器上正常运行。因此，我们尝试创建一个规范，提供可以达成共识的谷歌 API 的特性。结果是文件和目录 API 条目。Chrome 提供的这个 API 子集还没有完全指定;但是，出于 web 兼容性的原因，决定在 Firefox 中实现 API 的一个子集;这是在 Firefox 50 中引入的。

本文描述了文件和目录条目 API 的 Firefox 实现与其他实现和/或规范的不同之处。

Chrome 规范偏差
-----------

最大的兼容性问题仍然存在，Chrome 仍然使用旧的名称为许多接口的 API，因为他们实现了一个相关的，但不同的规范：

| 规范名称 | Google Chrome 使用的名称 |
| --- | --- |
| `FileSystemDirectoryEntry` | `DirectoryEntry` |
| `FileSystemDirectoryEntrySync` | `DirectoryEntrySync` |
| `FileSystemDirectoryReader` | `DirectoryReader` |
| `FileSystemDirectoryReaderSync` | `DirectoryReaderSync` |
| `FileSystemEntry` | `Entry` |
| `FileSystemEntrySync` | `EntrySync` |
| `FileSystemFileEntry` | `FileEntry` |
| `FileSystemFileEntrySync` | `FileEntrySync` |

请确保在代码中考虑到这一点，允许使用这两个名称。希望 Chrome 能很快更新，使用新的名字！

为了确保你的代码可以在 Chrome 和其他浏览器上运行，你可以包括如下代码：


```js
var FileSystemDirectoryEntry =
  window.FileSystemDirectoryEntry || window.DirectoryEntry;
var FileSystemEntry = window.FileSystemEntry || window.Entry;
```

Firefox 中的限制
------------

接下来，让我们看看 API 的 Firefox 实现的局限性。概括地说，这些限制可以概括如下：

* 脚本内容不能创建文件系统或启动对文件系统的访问。目前只有两种方法可以访问文件系统条目：
    + `<input>`元素，使用`HTMLInputElement.webkitEntries` (en-US)属性访问`FileSystemEntry` (en-US)对象数组，这些对象描述可以读取的文件系统条目。
    + 通过调用`DataTransferItem.getAsEntry()` (en-US)方法来使用拖放操作，该方法允许为拖放区域中的文件获取`FileSystemFileEntry`或`FileSystemDirectoryEntry`。
* 你不能用 `LocalFileSystem.requestFileSystem()` (en-US) 方法来访问指定的本地文件系统。
* 没有实现 `LocalFileSystem.resolveLocalFileSystemURL()` (en-US) 方法。
* 只实现接口的异步版本。任何名称以 "`Sync"` 结尾的接口都不可用。
* Firefox 只支持从文件系统中的文件读取。你不能用他们写入。特别是，用来创建`FileSystemFileEntry.createWriter()` (en-US)来处理文件写入的`FileWriter`方法没有实现，只会返回一个错误。
* Firefox 不支持 `"filesystem:"` URL 方案。
参见
--

* 文件和目录 API 条目
* 介绍文件和目录 API 条目
* 文件和目录 API 条目的最新规范，但仍然是早期规范。
* 文件 API 的原始规范：目录和系统(通常称为“FileSystem API”);谷歌 Chrome 是唯一一个实现这个废弃 API 的浏览器。
交易过程的基本概念
=========

**安全上下文:** 此项功能仅在一些支持的浏览器的安全上下文（HTTPS）中可用。

交易请求 API使在网站或应用上进行的交易变得更便捷。在这篇文档中，我们将了解此接口如何运作，以及各个组件的功能。

术语
--

在深入了解此 API 的工作方式前，你应该了解以下术语。

收款方（或商家）

商家可以是个人，也可以是一个组织。商家扮演的角色是在自己的网站或应用上通过支付请求 API 收款。

付款方

付款方可以是个人，也可以是一个组织。付款方扮演的角色是，在网站或应用上购买物品。支付流程要求付款方先自证身份，然后授权付款。

支付方式

付款的方式，例如信用卡或线上支付服务。

支付方式提供方

对某种特定支付方式提供技术支持的组织。例如，使用信用卡付钱时，信用卡交易处理就是一种支付方式提供方。

交易处理机

一段代码，作用是与付款方式提供方交互，进行交易处理。

某些交易处理机会用到**商家认证**。商家认证是指以某种方式认证商家的身份，可能的方式包括密码学机制（例如公钥）。认证成功后的商家得以和交易处理机进行交互。

支付方式识别码
-------

交易处理机是通过**支付方式识别码**识别的。交易方式识别码是一个指向唯一交易处理机的字符串，它可以是一套已成标准的识别码，也可以是一个 URL。后者被交易处理服务同时用于两种用途：自证身份和处理交易。

### 标准化的交易方式识别码

目前注册在案的只有一套标准化交易方式识别码。（未来可能会添加更多。）

`基本卡（basic-card，输入一次银行卡信息后即可多次消费的支付方式）`

?根据基本卡规范进行交易处理。详细说明请参见`BasicCardRequest`。***此处应该有对基本卡规范和使用方法进行说明的文档。***

### 基于 URL 的交易方式识别码

这种识别方式的具体使用将会极大程度地依赖不同服务各自的规范。比如，某种服务可能使用多个 URL 链接，不同 URL 的使用依赖于 API 的版本和通信方式等。

`https://apple.com/apple-pay`

交易使用Apple Pay服务。目前，只有 Safari 浏览器支持这种交易方式。

`https://google.com/pay`

交易使用Google Pay. 目前，只有 Chrome 及 Chrome 内核的浏览器支持这种交易方式。

交易处理机的功能
--------

用户代理内部机制支持不同类型的交易。另外，你还可以调用交易处理 API来支持更多相应的支付方式提供方（前提是你使用的浏览器支持这些 API 的使用）。不论使用哪种方式，交易处理机的功能都是如下几条：

1. **确保交易正确进行**。交易正确进行的条件取决于不同的支付类型和用户的支付请求；例如，如果用户选择了信用卡支付，而收款方并不支持这种方式，交易就无法正确进行。
2. **响应用户代理发起的对商家进行认证的请求（在处理机支持商家认证的前提下）**。详细说明请参考商家认证。
3. **验证用户提交的信息有资格发起一次有效交易**。这一步骤会创建并返回一个基于具体支付方式的对象，此对象包含处理交易所需要的信息。
商家认证
----

一些交易处理机包含**商家认证**步骤。商家认证是指，通过某种方式识别商家的身份，使用的方式通常是“密码学挑战”。没有成功通过认证的商家不被允许使用交易处理机。

具体的认证方式由交易处理机决定，也完全可以省去这种认证。最终，网站或应用唯一要做的就是就是获取商家的认证密钥并传输给 `complete()` (en-US) 事件的方法。


```js
paymentRequest.onmerchantvalidation = function (event) {
  event.complete(fetchValidationData(event.validationURL));
};
```


在这个例子中，由`fetchValidationData()`方法加载由`validationURL`提供的认证信息。要注意到的是，这个方法必须由商家服务器转发，因为通常情况下，客户端不会主动访问用于认证的 URL。

然后，该数据（或用来解析该数据的`Promise`）被传送给交易处理机的`complete()`方法。交易处理机可以用该数据获取更多信息或是进行更多重的算法解析，以认证商家对处理机的使用权。

因此，注意到如下事实很重要：用户代理永远不会发送 `merchantvalidation` (en-US) 事件，除非用户代理自身装载了交易处理机。例如，Safari 浏览器本身即支持 Apple Pay，而 Apple Pay 的交易处理机可据此向客户端发送`merchantvalidation`、指示客户端获取服务器上的认证信息，并将其传送给交易处理机的 `complete()`，来为商品进行支付。

规范
--

| Specification |
| --- |
| Payment Request API 1.1  |
| Payment Method Identifiers  |

参见
--

* 支付请求 API
* Using the Payment Request API (en-US)
* Payment processing concepts
* Introducing the Payment Request API for Apple Pay
* Google Pay API PaymentRequest Tutorial
ImageBitmap.width
=================

只读属性 **`ImageBitmap.width`** 返回 `ImageBitmap` 对象的 CSS 像素宽度。

规范
--

| Specification |
| --- |
| HTML Standard # dom-imagebitmap-width-dev |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
ImageBitmap.height
==================

**`只读属性 ImageBitmap.height`** 返回 `ImageBitmap` 对象的 CSS 像素高度。

规范
--

| Specification |
| --- |
| HTML Standard # dom-imagebitmap-height-dev |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
MediaStream.addTrack()
======================

**`MediaStream.addTrack()`** 方法会给流添加一个新轨道。指定一个`MediaStreamTrack`对象作为参数。

**备注：** 如果指定的 track 已经存在于流的 track set 里的话，该方法不会产生作用。

语法
--


```js
stream.addTrack(track);
```

### Parameters

`track`

A `MediaStreamTrack` to add to the stream.

Example
-------

Specifications
--------------

| Specification |
| --- |
| Media Capture and Streams # dom-mediastream-addtrack |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `MediaStream`, the interface it belongs to.
MediaStream()
=============

构造函数\*\*`MediaStream()`\*\* 返回新建的 `MediaStream` 实例，该实例作为媒体流的内容的集合载体，其可能包含多个媒体数据轨，每个数据轨则由一个 `MediaStreamTrack` 对象表示。如果给出相应参数，在指定的数据轨则被添加到新的流中。否则，该流中不包含任何数据轨。

语法
--


```js
newStream = new MediaStream();
newStream = new MediaStream(stream);
newStream = new MediaStream(tracks[]);
```

### 参数

`stream`

这是另一个 `MediaStream` 对象，其数据轨会被自动添加到新建的流中。且这些数据轨不会从原流中移除，即变成了两条流共享的数据。

`tracks`

这是 `MediaStreamTrack` 对象的 `Array` 类型的成员，代表了每一个添加到流中的数据轨。

### 返回值

新建的 `MediaStream` 对象，会包含创建时已给的数据轨内容，若没有给定任何数据轨则内容为空。

规范
--

| Specification |
| --- |
| Media Capture and Streams # dom-mediastream-constructor |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `MediaStream`
MediaStream.getTracks()
=======================

**实验性:** **这是一项实验性技术**  
在将其用于生产之前，请仔细检查浏览器兼容性表格。

`MediaStream` 接口的\*\*`getTracks()`\*\* 方法会返回一个包含 `track set` 流中所有 `MediaStreamTrack` 对象的序列，序列内容与`MediaStreamTrack.kind` (en-US) 无关。

语法
--


```js
getTracks()
```

### 参数

无

### 返回值

`MediaStreamTrack` 对象的数组

示例
--


```js
navigator.mediaDevices
  .getUserMedia({ audio: false, video: true })
  .then((mediaStream) => {
    document.querySelector("video").srcObject = mediaStream;
    // Stop the stream after 5 seconds
    setTimeout(() => {
      const tracks = mediaStream.getTracks();
      tracks[0].stop();
    }, 5000);
  });
```

规范
--

| Specification |
| --- |
| Media Capture and Streams # dom-mediastream-gettracks |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.