​​​URL​​​接口用于解析，构造，规范化和编码 ​​URLs​​。 它通过提供允许您轻松阅读和修改URL组件的属性来工作。 通常，通过在调用URL的构造函数时将URL指定为字符串或提供相对URL和基本URL来创建新的URL对象。 然后，您可以轻松读取URL的已解析组成部分或对URL进行更改。

如果浏览器尚不支持​​​URL()​​​​构造函数，则可以使用​​​Window​​​​中的​​​Window.URL​​​属性。 确保检查您的任何目标浏览器是否要求对此添加前缀。

​Note:​ 此特性在 ​​Web Worker​​ 中可用。

构造器

​​​new URL()​​​

创建并返回一个​​URL​​对象，该URL对象引用使用绝对URL字符串，相对URL字符串和基本URL字符串指定的URL。

属性

​​​hash​​​

包含​​'#'​​​的​​​USVString​​​，后跟URL的片段标识符。

​​​host​​​

一个​​​USVString​​​，其中包含域（即主机名），后跟（如果指定了端口）“：”和URL的端口。

​​​hostname​​​

包含 URL 域名的 ​​​USVString​​​。

​​​href​​​

包含完整 URL 的 ​​​USVString​​​。

​​​origin​​​ 只读

返回一个包含协议名、域名和端口号的 ​​​USVString​​​。

​​​password​​​

包含在域名前面指定的密码的  ​​​USVString​​​ 。

​​​pathname​​​

以 '/' 起头紧跟着 URL 文件路径的 ​​​DOMString​​​。

​​​port​​​

包含 URL 端口号的 ​​​USVString​​​。

​​​protocol​​​

包含 URL 协议名的 ​​​USVString​​​​，末尾带 ​​':'。​​

​​​search​​​

一个​​​USVString​​​ ，指示URL的参数字符串； 如果提供了任何参数，则此字符串包括所有参数，并以开头的“？”开头 字符。

​​​searchParams​​​ 只读

​​​URLSearchParams​​​​对象，可用于访问​​search​​中找到的各个查询参数。

​​​username​​​

包含在域名前面指定的用户名的 ​​​USVString​​​。

方法

​​​toString()​​​

返回包含整个URL的​​​USVString​​​​。 它是​​​URL.href​​​的同义词，尽管它不能用于修改值。

​​​toJSON()​​​

返回包含整个URL的​​​USVString​​​​。 它返回与​​href​​属性相同的字符串。

静态方法

​​​createObjectURL()​​​


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

​Note:​ 此特性在 ​​Web Worker​​ 中可用。

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

语法

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​​ `即可。




返回一个​​​DOMString​​​ ，包含一个唯一的blob链接（该链接协议为以blob:，后跟唯一标识浏览器中的对象的掩码）。

​​​revokeObjectURL()​​​


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

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

​Note:​ 此特性在 ​​Web Worker​​ 中可用。

语法

window.URL.revokeObjectURL(objectURL);

参数

​​objectURL​​

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



销毁之前使用​​​URL.createObjectURL()​​​方法创建的URL实例。

使用说明

如果​​url​​​参数是相对URL，则构造函数将使用​​url​​​参数和可选的​​base​​参数作为基础。

const url = new URL('../cats', 'http://www.example.com/dogs');
console.log(url.hostname); // "www.example.com"
console.log(url.pathname); // "/cats"

可以设置URL属性以构造URL：

url.hash = 'tabby';
console.log(url.href); // "http://www.example.com/cats#tabby"

URL根据 ​​RFC 3986​​中的规则进行编码。 例如：

url.pathname = 'démonstration.html';
console.log(url.href); // "http://www.example.com/d%C3%A9monstration.html"

​​​URLSearchParams​​​接口可用于构建和处理URL查询字符串。

要从当前窗口的URL获取搜索参数，可以执行以下操作：

// https://some.site/?id=123
const parsedUrl = new URL(window.location.href);
console.log(parsedUrl.searchParams.get("id")); // "123"

URL的​​​toString()​​​​方法仅返回​​​href​​​ 属性的值，因此构造函数可以 用于直接对URL进行规范化和编码。

const response = await fetch(new URL('http://www.example.com/démonstration.html'));