recursal/MDN huggingface dataset:
DataTransferItem.getAsString()
==============================

**`DataTransferItem.getAsString()`** 当 DataTransferItem 对象的 kind 属性是一个普通 Unicode 字符串时，该方法会用 DataTransferItem 对象的 kind 属性作为入参来执行传入的回调函数 (i.e. `kind` is `string`).

示例
--
```

dataTransferItem.getAsString(callback);
```

### Parameters

`callback`

A callback function that has access to the `data transfer item's` string data. See Callback below for details.

### Return value

`undefined`Callback
--------

The callback parameter is a callback function which accepts one parameter:

`DOMString`

The drag data item's string data.

The callback return value is `undefined`.

Example
-------

This example shows the use of the `getAsString()` method as an *inline function* in a `drop` event handler.


```js
function drop\_handler(ev) {
  console.log("Drop");
  ev.preventDefault();
  var data = ev.dataTransfer.items;
  for (var i = 0; i < data.length; i += 1) {
    if (data[i].kind == "string" && data[i].type.match("^text/plain")) {
      // This item is the target node
      data[i].getAsString(function (s) {
        ev.target.appendChild(document.getElementById(s));
      });
    } else if (data[i].kind == "string" && data[i].type.match("^text/html")) {
      // Drag data item is HTML
      console.log("... Drop: HTML");
    } else if (
      data[i].kind == "string" &&
      data[i].type.match("^text/uri-list")
    ) {
      // Drag data item is URI
      console.log("... Drop: URI");
    } else if (data[i].kind == "file" && data[i].type.match("^image/")) {
      // Drag data item is an image file
      var f = data[i].getAsFile();
      console.log("... Drop: File ");
    }
  }
}
```

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

| Specification |
| --- |
| HTML Standard # dom-datatransferitem-getasstring-dev |

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

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

See also
--------

* `DataTransfer.getData()`
DataTransferItem.getAsFile()
============================

如果 **`DataTransferItem`** 是一个文件，那 **`DataTransferItem.getAsFile()`** 方法将返回拖拽项数据的 `File` 对象。如果拖拽项的数据不是一个文件，则返回 `null`.

语法
--
```

File = DataTransferItem.getAsFile();
```

### 参数

*无。*

### 返回值

`File`

如果拖拽项的对象是一个文件，则返回 `File` 对象; 否则返回 `null` .

例子
--

下面这个例子中使用 `getAsFile()` 。放在 `drop` 事件处理里面。


```js
function drop\_handler(ev) {
  console.log("Drop");
  ev.preventDefault();
  var data = event.dataTransfer.items;
  for (var i = 0; i < data.length; i += 1) {
    if (data[i].kind == "string" && data[i].type.match("^text/plain")) {
      // 遍历拖拽项的内容
      data[i].getAsString(function (s) {
        ev.target.appendChild(document.getElementById(s));
      });
    } else if (data[i].kind == "string" && data[i].type.match("^text/html")) {
      // 拖拽项的数据是 HTML
      console.log("... Drop: HTML");
    } else if (
      data[i].kind == "string" &&
      data[i].type.match("^text/uri-list")
    ) {
      // 拖拽项的数据是 URI
      console.log("... Drop: URI");
    } else if (data[i].kind == "file" && data[i].type.match("^image/")) {
      // 拖拽项的数据是一个图片
      var f = data[i].getAsFile();
      console.log("... Drop: File ");
    }
  }
}
```

规范
--

| Specification |
| --- |
| HTML Standard # dom-datatransferitem-getasfile-dev |

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

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

查看更多
----

* `DataTransfer.files()`
DataTransferItem：type 属性
========================

只读属性 **`DataTransferItem.type`** 返回代表拖动数据项的 `DataTransferItem` 对象的类型（格式）。`type` 是一个 Unicode 字符串，通常由 MIME 类型给出（虽然 MIME 类型不是必须的）。

一些示例类型：`text/plain` 和 `text/html`。

值
-

一个表示拖动数据项类型的字符串。

示例
--

该示例演示了 `type` 属性的用法。


```js
function dropHandler(ev) {
  console.log("放置");
  ev.preventDefault();
  const data = ev.dataTransfer.items;
  for (let i = 0; i < data.length; i += 1) {
    if (data[i].kind === "string" && data[i].type.match("^text/plain")) {
      // 该项目是目标节点
      data[i].getAsString((s) => {
        ev.target.appendChild(document.getElementById(s));
      });
    } else if (data[i].kind === "string" && data[i].type.match("^text/html")) {
      // 拖动数据项是 HTML
      console.log("放置：HTML");
    } else if (
      data[i].kind === "string" &&
      data[i].type.match("^text/uri-list")
    ) {
      // 拖动数据项是 URI
      console.log("放置：URI");
    } else if (data[i].kind === "file" && data[i].type.match("^image/")) {
      // 拖动数据项是图像文件
      const f = data[i].getAsFile();
      console.log("……放置：文件");
    }
  }
}
```

规范
--

| Specification |
| --- |
| HTML Standard # dom-datatransferitem-type-dev |

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

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

参见
--

* `DataTransfer.types()`
* 常见 MIME 类型列表
WindowClient.navigate()
=======================

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

`WindowClient` (en-US) 接口的 **`navigate()`** 方法加载特定的 URL 地址到一个被控制的浏览器页面，并返回一个当前 `WindowClient` (en-US) 议的 `Promise` 对象。

语法
--
```

WindowClient.navigate(url).then(function(WindowClient) {
  // do something with your WindowClient after navigation
});
```

### 参数

`url`

跳转地址

### 返回值

一个 `WindowClient` (en-US)决议的`Promise`对象。

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

| Specification |
| --- |
| Service Workers # client-navigate |

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

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

**`MessageEvent()`** 构造函数创建一个新的 `MessageEvent` 对象实例。

语法
--


```js
var messageEvent = new MessageEvent(type, init);
```

### 参数

type

要创建的 `MessageEvent` 的类型。这可能是 XXX 中的一个

**`init`** 可选

可以包含以下属性的 dictionary 对象：

* `data`: 你希望包含在 MessageEvent 中的数据。这可以是任何数据类型，如果没有指定，则默认为 null。
* `origin`: `USVString` 表示消息发送源。如果没有指定，则默认为空字符串 ("")。
* `lastEventId`: `DOMString` 表示事件的唯一 ID。如果没有指定，则默认为空字符串 ("")。
* `source`: `MessageEventSource` (可以是 `WindowProxy`, `MessagePort`, 或 `ServiceWorker` 对象) 表示消息发送对象。如果没有设置，则默认为 null。
* `ports`: `MessagePort` 对象数组，表示正在通过的消息通道关联的端口 (在适当的情况下，例如在通道消息传递或向共享工作者发送消息时)。如果没有指定，则默认为空数组 ([])。

示例
--


```js
var myMessage = new MessageEvent("worker", {
  data: "hello",
});
```

规范
--

| Specification |
| --- |
| HTML Standard # the-messageevent-interface:dom-event-constructor |

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

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

另见
--

* `ExtendableMessageEvent` (en-US) — 类似于此接口，但用于需要为作者提供更多灵活性的接口。
Screen.availLeft
================

### 概述

返回浏览器可用空间左边距离屏幕（系统桌面）左边界的距离。

### 语法
```

iAvail = window.screen.availLeft
```

### 示例
```

setY = window.screen.height - window.screen.availTop;
setX = window.screen.width - window.screen.availLeft;
window.moveTo(setX, setY);
```

### 备注

大多数情况下，该属性返回 0。

如果你在有两个屏幕的电脑上使用该属性，在右侧屏幕计算该属性值时，返回左侧屏幕的宽度（单位：像素），也即左侧屏幕左边界的 X 坐标。

在 Windows 中，该属性值取决于哪个屏幕被设为主屏幕，返回相对于主屏幕左边界的 X 坐标。就是说，即使主屏幕不是左侧的屏幕，它的左边界的 X 坐标也是返回 0。如果副屏幕在主屏幕的左侧，则它拥有负的 X 坐标。

[1] [2] - 左屏幕 *availLeft* 返回 **0**，右侧的屏幕返回左侧屏幕的宽度

[2] [1] - 左侧屏幕 *availLeft* 返回该屏幕的 **-width**，右侧屏幕返回 **0**

### 规范

DOM Level 0。不属于任何规范。
Screen.availTop
===============

### 概述

浏览器窗口在屏幕上的可占用空间上边距离屏幕上边界的像素值。

### 语法
```

iAvail = window.screen.availTop
```

### 示例
```

setY = window.screen.height - window.screen.availTop;
setX = window.screen.width - window.screen.availLeft;
window.moveTo(setX, setY);
```

### 备注

大多数情况下，该属性返回 0。

### 规范

DOM Level 0。不属于任何规范。
DOMParser()
===========

**`DOMParser()`** 构造函数新建一个 `DOMParser` 对象实例。

语法
--


```js
var parser = new DOMParser();
```

### 参数

无。

### 返回值

一个新建的`DOMParser` 对象实例，可以通过这个对象的 `parseFromString()` 方法将字符串解析为 DOM 对象。
URL.host
========

`URL` 接口的 **`host`** 属性是一个 `USVString` 值，包含了主机信息，也就是 *主机名（hostname）*，还有，如果 URL 接口不为空，也会包含冒号 `':'` 和 URL 的 *端口（port）*。

**备注：** 此特性在 Web Worker 中可用

语法
--
```

string = object.host;
object.host = string;
```

### 返回值

`USVString`.

示例
--


```js
var url = new URL("https://developer.mozilla.org/zh-CN/docs/Web/API/URL/host");
var result = url.host; // "developer.mozilla.org"

var url = new URL(
  "https://developer.mozilla.org:443/zh-CN/docs/Web/API/URL/host",
);
var result = url.host; // "developer.mozilla.org"
// The port number is not included because 443 is the scheme's default port

var url = new URL(
  "https://developer.mozilla.org:4097/zh-CN/docs/Web/API/URL/host",
);
var result = url.host; // "developer.mozilla.org:4097"
```

规范
--

| Specification |
| --- |
| URL Standard # dom-url-host |

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

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

参考
--

* 所属的 `URL` 接口。
URL：password 属性
===============

`URL`接口的 **`password`** 属性为`USVString`，其中包含在域名之前指定的密码。

如果在未设置username属性的情况下进行调用，默认失败。

**备注：** 此特性在 Web Worker 中可用

语法
--


```js
string = object.password;
object.password = string;
```

### 值

A `USVString`.

Examples
--------


```js
var url = new URL(
  "https://anonymous:flabada@developer.mozilla.org/zh-CN/docs/Web/API/URL/password",
);
var result = url.password; // Returns:"flabada"
```

规范
--

| Specification |
| --- |
| URL Standard # dom-url-password |

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

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

参见
--

* The `URL` interface it belongs to.
URL.searchParams
================

`URL` 接口的 **`searchParams`** 属性返回一个 `URLSearchParams` 对象，这个对象包含当前 URL 中解码后的 `GET` 查询参数。

**备注：** 此特性在 Web Worker 中可用

值
-

一个 `URLSearchParams` 对象。

示例
--

如果你的 URL 是 `https://example.com/?name=Jonathan%20Smith&age=18`，你可以这样解析 URL，然后得到 `name` 和 `age` 的值。


```js
let params = new URL(document.location).searchParams;
let name = params.get("name"); // is the string "Jonathan Smith".
let age = parseInt(params.get("age")); // is the number 18
```

规范
--

| Specification |
| --- |
| URL Standard # dom-url-searchparams |

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

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

`URL` 接口的 **`hostname`** 属性是一个 `USVString` 值，包含有 URL 中的域名。

**备注：** 此特性在 Web Worker 中可用

语法
--
```

string = object.hostname;
object.hostname = string;
```

### 返回值

`USVString`.

示例
--


```js
var url = new URL(
  "https://developer.mozilla.org/zh-CN/docs/Web/API/URL/hostname",
);
var result = url.hostname; // Returns:'developer.mozilla.org'
```

规范
--

| Specification |
| --- |
| URL Standard # dom-url-hostname |

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

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

参考
--

* 属的 `URL` 接口。
URL.search
==========

`URL` 接口的 **`search`** 属性是一个搜索字符串，也称为查询字符串，这是一个字符串包含一个 `'?'` 后面跟着 URL 的参数。

现代浏览器提供`URL.searchParams`属性，以便轻松解析查询字符串中的参数。

**备注：** 此特性在 Web Worker 中可用

语法
--
```

string = object.search;
object.search = string;
```

### 值

一个 `USVString`.

例子
--


```js
var url = new URL(
  "https://developer.mozilla.org/zh-CN/docs/Web/API/URL/search?q=123",
);
var queryString = url.search; // Returns:"?q=123"
```

规范
--

| Specification |
| --- |
| URL Standard # dom-url-search |

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

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

参考
--

* 它所属的`URL`接口。
URL.port
========

`URL` 接口的端口属性是包含了 URL 的端口号信息的`USVString`值，如果 URL 中不包含明确的端口号，这个属性将为`''`.
**备注：** 此特性在 Web Worker 中可用

语法
--
```

string = object.port;
object.port = string;
```

### 参数

A `USVString`.

示例
--


```js
var url = new URL("https://mydomain.com:80/svn/Repos/");
var result = url.port; // Returns:'80'
```

规范
--

| Specification |
| --- |
| URL Standard # dom-url-port |

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

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

参见
--

* The `URL` interface it belongs to.
URL.revokeObjectURL()
=====================

**`URL.revokeObjectURL()`** 静态方法用来释放一个之前已经存在的、通过调用 `URL.createObjectURL()` 创建的 URL 对象。当你结束使用某个 URL 对象之后，应该通过调用这个方法来让浏览器知道不用在内存中继续保留对这个文件的引用了。

你可以在 `sourceopen` 被处理之后的任何时候调用 `revokeObjectURL()`。这是因为 `createObjectURL()` 仅仅意味着将一个媒体元素的 `src` 属性关联到一个 `MediaSource` 对象上去。调用`revokeObjectURL()` 使这个潜在的对象回到原来的地方，允许平台在合适的时机进行垃圾收集。

**备注：** 此特性在 Web Worker 中可用

语法
--
```

window.URL.revokeObjectURL(objectURL);
```

### 参数

`objectURL`

一个 `DOMString`，表示通过调用 `URL.createObjectURL()` 方法产生的 URL 对象。

### Return value

undefined

示例
--

查看使用对象 URL 显示图片。

规范
--

| Specification |
| --- |
| File API # dfn-revokeObjectURL |

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

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

参见
--

* 在 Web 应用程序中使用文件
* 使用对象 URL 显示图像
* `URL.createObjectURL()`
URL.href
========

`URL` 接口的 **`href`** 属性是一个包含完整 URL 的 `USVString` 值。

**备注：** 此特性在 Web Worker 中可用

语法
--
```

string = object.href;
object.href = string;
```

### 返回值

`USVString`.

示例
--


```js
var url = new URL("https://developer.mozilla.org/zh-CN/docs/Web/API/URL/href");
var result = url.href; // Returns: 'https://developer.mozilla.org/zh-CN/docs/Web/API/URL/href'
```

规范
--

| Specification |
| --- |
| URL Standard # dom-url-href |

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

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

参考
--

* 所属的 `URL` 接口。
URL：hash 属性
===========

`URL` 接口的 **`hash`** 属性是一个包含 URL 标识中的 `'#'` 和片段（fragment）标识符的字符串。

片段不会经过 URL 解码。如果某个 URL 没有片段，该属性会包含一个空字符串——`""`。

**备注：** 此特性在 Web Worker 中可用

值
-

一个字符串。

示例
--


```js
const url = new URL(
  "https://developer.mozilla.org/zh-CN/docs/Web/API/URL/href#示例",
);
console.log(url.hash); // 输出：'#%E7%A4%BA%E4%BE%8B'
```

规范
--

| Specification |
| --- |
| URL Standard # dom-url-hash |

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

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

参见
--

* 所属的 `URL` 接口。
URL.origin
==========

**`URL.origin`** 是一个只读属性，返回一个 `USVString` 类型值，包含 URL 源经过 Unicode 序列化之后的值，也就是：

* 对于使用 `http` 或者 `https` 协议的 URL, 返回协议名，然后是 `'://'`, 然后是域，然后是 `':'`, 最后是端口号 (默认端口是 `80` 和 `443`);
* 对于使用 `file:` 协议的 URL，返回值因浏览器而异;
* 对于使用 `blob:` 协议的 URL，返回值是 `blob:` 后跟随的源地址。例如 `"blob:https://mozilla.org"` 将会返回 `"https://mozilla.org".`

**备注：** 此特性在 Web Worker 中可用

语法
--
```

string = URLObject.origin;
```

示例
--


```js
var result = new URL("blob:https://mozilla.org:443/").origin;
// 返回:'https://developer.mozilla.org:443'
```

规范
--

| Specification |
| --- |
| URL Standard # dom-url-origin |

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

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

See also
--------

* The `HTMLHyperlinkElementUtils.origin` property
URL.toString()
==============

**`URL.toString()`** 字符串化方法返回一个包含完整 URL 的 `USVString`。它的作用等同于只读的 `URL.href`。

**备注：** 此特性在 Web Worker 中可用

语法
--
```

string = url.toString();
```

### 参数

无。

### 返回值

一个`USVString`。

参考
--


```js
const url = new URL(
  "https://developer.mozilla.org/zh-CN/docs/Web/API/URL/toString",
);
url.toString(); // 应当返回字符串形式的 URL
```

规范
--

| Specification |
| --- |
| URL Standard # URL-stringification-behavior |

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

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

参见
--

* 父级接口 `URL`。
URL.pathname
============

`URL`接口的 **`pathname`** 属性是一个`USVString`，包含一个初始 `'/'` 和 URL 的路径 (如果没有路径，则为空字符串)

**备注：** 此特性在 Web Worker 中可用

语法
--
```

string = object.pathname;
object.pathname = string;
```

### 值

一个`USVString`.

例子
--


```js
var url = new URL(
  "https://developer.mozilla.org/zh-CN/docs/Web/API/URL/pathname",
);
var result = url.pathname; // Returns:"/zh-CN/docs/Web/API/URL/pathname"
```

规范
--

| Specification |
| --- |
| URL Standard # dom-url-pathname |

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

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

参考
--

* 它所属的`URL`接口。
URL.protocol
============

`URL`接口的 **`protocol`** 是一个包含 URL 协议的`USVString`值，此值包含协议后的`':'`.
**备注：** 此特性在 Web Worker 中可用

语法
--
```

string = object.protocol;
object.protocol = string;
```

### 参数

A `USVString`.

示例
--


```js
var url = new URL(
  "https://developer.mozilla.org/zh-CN/docs/Web/API/URL/protocol",
);
var result = url.protocol; // Returns:"https:"
```

规范
--

| Specification |
| --- |
| URL Standard # dom-url-protocol |

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

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

其他链接
----

* The `URL` interface it belongs to.
URL.username
============

`URL`接口的 username 属性是`USVString` ，其中包含域名前指定的\*\*`username`\*\* 。

**备注：** 此特性在 Web Worker 中可用

语法
--
```

string = object.username;
object.username = string;
```

### 值

一个 `USVString`.

例子
--


```js
var url = new URL(
  "https://anonymous:flabada@developer.mozilla.org/zh-CN/docs/Web/API/URL/username",
);
var user = url.username; // 返回：“anonymous”
```

规范
--

| Specification |
| --- |
| URL Standard # dom-url-username |

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

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

参考
--

* 所属的 `URL`接口。
URL.createObjectURL()
=====================

**`URL.createObjectURL()`** 静态方法会创建一个 `DOMString`，其中包含一个表示参数中给出的对象的 URL。这个 URL 的生命周期和创建它的窗口中的 `document` 绑定。这个新的 URL 对象表示指定的 `File` 对象或 `Blob` 对象。

**备注：** 此特性在 Web Worker 中可用

**备注：** 此特性在 Service Worker 中不可用，因为它有可能导致内存泄漏。

语法
--


```js
objectURL = URL.createObjectURL(object);
```

### 参数

`object`

用于创建 URL 的 `File` 对象、`Blob` 对象或者 `MediaSource` 对象。

### 返回值

一个`DOMString`包含了一个对象 URL，该 URL 可用于指定源 `object`的内容。

示例
--

查看使用对象 URL 显示图片.

附注
--

### 内存管理

在每次调用 `createObjectURL()` 方法时，都会创建一个新的 URL 对象，即使你已经用相同的对象作为参数创建过。当不再需要这些 URL 对象时，每个对象必须通过调用 `URL.revokeObjectURL()` 方法来释放。

浏览器在 document 卸载的时候，会自动释放它们，但是为了获得最佳性能和内存使用状况，你应该在安全的时机主动释放掉它们。

### 使用相对 URLs 作为媒体流

在旧版本的媒体资源规范中，添加流作为`<video>`元素需要创建一个关于 `MediaStream`的对象 URL。现已没必要这样做了，浏览器已经移除了该操作的支持。

**警告：** 如果你为了去添加流作为媒体元素，而仍旧使用着依赖`createObjectURL()` 的代码，你需要更新的代码，仅需要设定`srcObject` 到 `MediaStream` 即可。

规范
--

| Specification |
| --- |
| File API # dfn-createObjectURL |

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

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

参见
--

* 在 web 应用程序中使用文件
* 使用对象 URL 显示图像
* `URL.revokeObjectURL()`
* `HTMLMediaElement.srcObject`
* `FileReader.readAsDataURL()`
URL()
=====

**`URL()`** 构造函数返回一个新创建的 `URL` 对象，该对象表示由参数定义的 URL。

如果给定的基本 URL 或生成的 URL 不是有效的 URL，则会抛出 JavaScript `TypeError` 异常。

**备注：** 此特性在 Web Worker 中可用

语法
--


```js
new URL(url)
new URL(url, base)
```

### 参数

`url`

一个表示绝对或相对 URL 的 `DOMString` 或任何具有字符串化方法的对象，例如 `<a>` 或 `<area>` 元素。如果 `url` 是相对 URL，则会将 `base` 用作基准 URL。如果 `url` 是绝对 URL，则无论参数 `base` 是否存在，都将被忽略。

`base` 可选

一个表示基准 URL 的字符串，当 `url` 为相对 URL 时，它才会生效。如果未指定，它默认为 `undefined`。


**备注：** `url` 和 `base` 参数将从任意对象转换为字符串，就像其他接受字符串的 Web API 一样。特别地，你可以为任一参数使用现有的 `URL` 对象，它将被转换为该对象的 `href` 属性。

### 异常

| 异常 | 解释 |
| --- | --- |
| `TypeError` | `url`（若为绝对 URL）或 `base` + `url`（若为相对 URL）是一个无效的 URL 链接。 |

示例
--


```js
// 基准 URL：
let baseUrl = "https://developer.mozilla.org";

let A = new URL("/", baseUrl);
// => 'https://developer.mozilla.org/'

let B = new URL(baseUrl);
// => 'https://developer.mozilla.org/'

new URL("en-US/docs", B);
// => 'https://developer.mozilla.org/en-US/docs'

let D = new URL("/en-US/docs", B);
// => 'https://developer.mozilla.org/en-US/docs'

new URL("/en-US/docs", D);
// => 'https://developer.mozilla.org/en-US/docs'

new URL("/en-US/docs", A);
// => 'https://developer.mozilla.org/en-US/docs'

new URL("/en-US/docs", "https://developer.mozilla.org/fr-FR/toto");
// => 'https://developer.mozilla.org/en-US/docs'

// 无效 URL：

new URL("/en-US/docs", "");
// 抛出 TypeError 异常：'' is not a valid URL

new URL("/en-US/docs");
// 抛出 TypeError 异常：'/en-US/docs' is not a valid URL

// 其他示例：

new URL("http://www.example.com");
// => 'http://www.example.com/'

new URL("http://www.example.com", B);
// => 'http://www.example.com/'

new URL("", "https://example.com/?query=1");
// => 'https://example.com/?query=1'（Edge 早于 79 的版本会移除查询参数）

new URL("/a", "https://example.com/?query=1");
// => 'https://example.com/a'（见相对 URL）

new URL("//foo.com", "https://example.com");
// => 'https://foo.com/'（见相对 URL）
```

规范
--

| Specification |
| --- |
| URL Standard # dom-url-url |

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

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

参见
--

* `core-js` 中 `URL` 的 polyfill
* 接口：`URL`
URL.toJSON()
============

`URL`接口的 **toJSON()** 方法返回一个`USVString`，其中包含一个序列化的 URL 版本，尽管在实践中它似乎与`URL.toString()`有相同的效果。

**备注：** 此特性在 Web Worker 中可用

语法
--
```

const href = url.toJSON()
```

### 返回值

一个 `USVString`.

例子
--
```

const url = new URL("https://developer.mozilla.org/zh-CN/docs/Web/API/URL/toString");
url.toJSON(); // 应该以字符串形式返回 URL
```

规范
--

| Specification |
| --- |
| URL Standard # dom-url-tojson |

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

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

`WritableStreamDefaultWriter` 接口的只读属性 **`desiredSize`** 返回填充满流的内部队列需要的大小。

值
-

一个整数。请注意，在队列已满的情况下，则可能是负数。

如果无法成功写入流（由于流发生错误或者中止入队），则该值为 `null`，如果流关闭，则该值为 0。

### 异常

`TypeError`

writer 的锁已被释放。

示例
--


```js
const writableStream = new WritableStream({
  write(chunk) {
    ...
  },
  close() {
    ...
  },
  abort(err) {
    ...
  }
}, queuingStrategy);

...

const writer = writableStream.getWriter();

...

// return stream's desired size
let size = writer.desiredSize;
```

规范
--

| Specification |
| --- |
| Streams Standard # ref-for-default-writer-desired-size⑥ |

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

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

`WritableStreamDefaultWriter` 接口的 **`releaseLock()`** 方法用于释放 writer 对相应流的锁定。释放锁后，writer 将不再处于锁定状态。如果释放锁时关联的流出错，writer 随后也会以同样的方式发生错误；此外，writer 将会关闭。

语法
--


```js
releaseLock()
```

### 参数

无。

### 返回值

无（`undefined`）。

示例
--


```js
const writableStream = new WritableStream({
  write(chunk) {
    ...
  },
  close() {
    ...
  },
  abort(err) {
    ...
  }
}, queuingStrategy);

...

const writer = writableStream.getWriter();

...

// release writer's lock on the stream when desired
writer.releaseLock();
```

规范
--

| Specification |
| --- |
| Streams Standard # ref-for-default-writer-release-lock② |

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

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

`WritableStreamDefaultWriter` 接口的只读属性 **`ready`** 返回一个 `Promise`，当流填充内部队列的所需大小从非正数变为正数时兑现，表明它不再应用背压。

值
-

一个 `Promise`。

示例
--

以下示例使用了 `ready` 属性的两种用法。第一种使用 `ready` 来确保 `WritableStream` 已完成写入，因此能够保证其已经准备好接收新的数据。第二种也检查 `WritableStream` 是否完成写入，但是这一次是因为写入操作必须在 writer 关闭之前完成。


```js
function sendMessage(message, writableStream) {
  // defaultWriter is of type WritableStreamDefaultWriter
  var defaultWriter = writableStream.getWriter();
  var encoder = new TextEncoder();
  var encoded = encoder.encode(message, { stream: true });
  encoded.forEach(function (chunk) {
    // Make sure the stream and its writer are able to
    // receive data.
    defaultWriter.ready.then(function () {
      defaultWriter
        .write(chunk)
        .then(function () {
          console.log("Chunk written to sink.");
        })
        .catch(function (err) {
          console.log("Chunk error: " + err);
        });
    });
    // Call ready again to ensure that all chunks are written
    // before closing the writer.
    defaultWriter.ready.then(function () {
      defaultWriter
        .close()
        .then(function () {
          console.log("All chunks written");
        })
        .catch(function (err) {
          console.log("Stream error: " + err);
        });
    });
  });
}
```

规范
--

| Specification |
| --- |
| Streams Standard # ref-for-default-writer-ready⑨ |

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

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

`WritableStreamDefaultWriter` 接口的只读属性 **`closed`** 返回一个 `Promise`，这个 promise 在流关闭时兑现，而在流抛出错误或者 writer 的锁被释放时拒绝。

值
-

一个 `Promise`。

示例
--


```js
const writableStream = new WritableStream({
  start(controller) {
  },
  write(chunk, controller) {
    ...
  },
  close(controller) {
    ...
  },
  abort(err) {
    ...
  }
}, queuingStrategy);

...

const writer = writableStream.getWriter();

..

// check if the stream is closed
writer.closed.then(() => {
  console.log('writer closed');
})
```

规范
--

| Specification |
| --- |
| Streams Standard # ref-for-default-writer-closed② |

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

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