URL API

翻译不完整。 请帮助我们翻译这篇文章!

URL API是一个URL标准的组件,它定义了有效的Uniform Resource Locator和访问、操作URL的API。URL标准还定义了像域名、主机和IP地址等概念,并尝试以标准的方式去描述用于以键/值对的形式提交web表单内容的遗留application/x-www-form-urlencoded MIME type 。

URL的概念和用法

URL标准的主要内容是由URL的定义以及它的结构和解析方式决定的。还介绍了与网络上计算机寻址有关的各种术语的定义,并指定了解析IP地址和DOM地址的算法。大多数开发人员更感兴趣的是API本身。

使用URL组件

给指定的URL创建一个 URL 对象将解析URL并通过其属性对其组成部分的快速访问。

let addr = new URL("https://developer.mozilla.org/en-US/docs/Web/API/URL_API");
let host = addr.host;
let path = addr.pathname;

上面的代码片段为您正在阅读的文章创建一个URL对象,然后获取 host 和 pathname 属性。在本例中,这些字符串的值分别是developer.mozilla.org 和/en-US/docs/Web/API/URL_API

修改URL

URL对象的大部分属性都是可设置的;您可以向它们写入新值来更改对象所表示的URL。例如,要创建一个URL对象并设置它的用户名:

let myUsername = "someguy";
let addr = new URL("https://mysite.com/login");
addr.username = myUsername;

设置 username 值不仅是设置该属性的值,而且更新整个URL。执行上面的代码片段后, addr.href 的返回值是https://someguy@mysite.com/login。对于任何可写属性都是如此。

查询

 search 属性在URL上包含URL的查询字符串部分。例如,如果URL是https://mysite.com/login?user=someguy&page=news,那么search 属性的值是?user=someguy&page=news。您还可以使用 URLSearchParams 对象的 get() 查找单个参数的值:

let addr = new URL("https://mysite.com/login?user=someguy&page=news");
try {
  loginUser(addr.searchParams.get("user"));
  gotoPage(addr.searchParams.get("page"));
} catch(err) {
  showErrorMessage(err);
}

例如,在上面的代码片段中,从查询中提取用户名和目标页面,并将其传递给适当的函数,站点代码使用这些函数登录并将用户路由到站点的目的页面。

URLSearchParams中的其他函数允许修改改、添加和删除键和值,甚至对参数列表进行排序。

URL API 接口

URL API是一个简单的API,它的名字只有几个接口:

该规范的旧版本包括一个名为URLUtilsReadOnly的接口,该接口已经合并到WorkerLocation 接口中。

例子

如果希望处理URL中包含的参数,可以手动进行处理,但是创建一个URL对象更容易。下面的fillTableWithParameters()函数接受一个表示<table>的   HTMLTableElement 对象作为输入。将行添加到表中,每个行对应参数中找到的键,第一列包含键,第二列包含值。

注意,在生成表之前调用  URLSearchParams.sort() 对参数列表进行排序。

function fillTableWithParameters(tbl) {
  let url = new URL(document.location.href);
  url.searchParams.sort();
  let keys = url.searchParams.keys();
 
  for (let key of keys) {
    let val = url.searchParams.get(key);
    let row = document.createElement("tr");
    let cell = document.createElement("td");
    cell.innerText = key;
    row.appendChild(cell);
    cell = document.createElement("td");
    cell.innerText = val;
    row.appendChild(cell);
    tbl.appendChild(row);
  };
}

在 found on Glitch上可以找到这个例子的工作版本。只要在加载页面时向URL添加参数,就可以在表中看到它们。例如,试试https://url-api.glitch.me?from=mdn&excitement=high&likelihood=inconceivable

规范

规范 状态 描述
URL Living Standard WHATWG 规范

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
URLChrome Full support 32
Full support 32
Full support 19
Prefixed
Prefixed Implemented with the vendor prefix: webkit
Edge Full support 12Firefox Full support 19
Notes
Full support 19
Notes
Notes Before version 57, Firefox had a bug whereby single quotes contained in URLs are escaped when accessed via URL APIs (see bug 1386683).
Notes To use it from chrome code, JSM and Bootstrap scope, you have to import it with Cu.importGlobalProperties(['URL']);.
IE Full support 10Opera Full support 19
Full support 19
Full support 15
Prefixed
Prefixed Implemented with the vendor prefix: webkit
Safari Full support 7
Full support 7
Full support 6
Prefixed
Prefixed Implemented with the vendor prefix: webkit
WebView Android Full support 4.4
Full support 4.4
Full support 4
Prefixed
Prefixed Implemented with the vendor prefix: webkit
Chrome Android Full support 32
Full support 32
Full support 25
Prefixed
Prefixed Implemented with the vendor prefix: webkit
Firefox Android Full support 19
Notes
Full support 19
Notes
Notes Before version 57, Firefox had a bug whereby single quotes contained in URLs are escaped when accessed via URL APIs (see bug 1386683).
Notes To use it from chrome code, JSM and Bootstrap scope, you have to import it with Cu.importGlobalProperties(['URL']);.
Opera Android Full support 19
Full support 19
Full support 14
Prefixed
Prefixed Implemented with the vendor prefix: webkit
Safari iOS Full support 7
Full support 7
Full support 6
Prefixed
Prefixed Implemented with the vendor prefix: webkit
Samsung Internet Android Full support 2.0
Full support 2.0
Full support 1.5
Prefixed
Prefixed Implemented with the vendor prefix: webkit
URL() constructorChrome Full support 19Edge Full support 12Firefox Full support 26IE No support NoOpera Full support 15Safari Partial support 6
Notes
Partial support 6
Notes
Notes In Safari 14 and earlier, calling the URL constructor with a base URL whose value is undefined causes Safari to throw a TypeError; see WebKit bug 216841.
WebView Android Full support ≤37Chrome Android Full support 25Firefox Android Full support 26Opera Android Full support 14Safari iOS Partial support 6
Notes
Partial support 6
Notes
Notes In Safari 14 and earlier, calling the URL constructor with a base URL whose value is undefined causes Safari to throw a TypeError; see WebKit bug 216841.
Samsung Internet Android Full support 1.5
createObjectURL
Experimental
Chrome Full support 19Edge Full support 12Firefox Full support 19
Notes
Full support 19
Notes
Notes createObjectURL() is no longer available within the context of a ServiceWorker.
IE Full support 10
Notes
Full support 10
Notes
Notes If the underlying object does not have a content type set, using this URL as the src of an img tag fails intermittently with error DOM7009.
Opera Full support 15Safari Full support 6WebView Android Full support YesChrome Android Full support 25Firefox Android Full support 19
Notes
Full support 19
Notes
Notes createObjectURL() is no longer available within the context of a ServiceWorker.
Opera Android Full support 14Safari iOS Full support 6Samsung Internet Android Full support 1.5
hashChrome Full support YesEdge Full support 13Firefox Full support 22IE No support NoOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 22Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
hostChrome Full support YesEdge Full support 13Firefox Full support 22IE No support NoOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 22Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
hostnameChrome Full support YesEdge Full support 13Firefox Full support 22IE No support NoOpera Full support YesSafari Full support 10WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 22Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
hrefChrome Full support YesEdge Full support 13Firefox Full support 22IE No support NoOpera Full support YesSafari Full support 10WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 22Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
originChrome Full support 32Edge Full support 12Firefox Full support 26
Full support 26
No support 26 — 49
Notes
Notes Results for URL using the blob scheme incorrectly returned null.
IE No support NoOpera Full support YesSafari Full support 10WebView Android Full support ≤37Chrome Android Full support 32Firefox Android Full support 26
Full support 26
No support 26 — 49
Notes
Notes Results for URL using the blob scheme incorrectly returned null.
Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support 6.0
passwordChrome Full support 32Edge Full support 12Firefox Full support 26IE No support NoOpera Full support YesSafari Full support 10WebView Android Full support ≤37Chrome Android Full support 32Firefox Android Full support 26Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support 6.0
pathnameChrome Full support YesEdge Full support 13Firefox Full support 53
Full support 53
No support 22 — 53
Notes
Notes pathname and search returned the wrong values so that for a URL of http://z.com/x?a=true&b=false, pathname would return "/x?a=true&b=false" and search would return "", rather than "/x" and "?a=true&b=false" respectively.
IE No support NoOpera Full support YesSafari Full support 10WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 53
Full support 53
No support 22 — 53
Notes
Notes pathname and search returned the wrong values so that for a URL of http://z.com/x?a=true&b=false, pathname would return "/x?a=true&b=false" and search would return "", rather than "/x" and "?a=true&b=false" respectively.
Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
portChrome Full support YesEdge Full support 13Firefox Full support 22IE No support NoOpera Full support YesSafari Full support 10WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 22Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
protocolChrome Full support YesEdge Full support 13Firefox Full support 22IE No support NoOpera Full support YesSafari Full support 10WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 22Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
revokeObjectURL
Experimental
Chrome Full support 19Edge Full support 12Firefox Full support 19
Notes
Full support 19
Notes
Notes revokeObjectURL() is no longer available within the context of a ServiceWorker.
IE Full support 10Opera Full support 15Safari Full support 6WebView Android Full support ≤37Chrome Android Full support 25Firefox Android Full support 19
Notes
Full support 19
Notes
Notes revokeObjectURL() is no longer available within the context of a ServiceWorker.
Opera Android Full support 14Safari iOS Full support 6Samsung Internet Android Full support 1.5
searchChrome Full support YesEdge Full support 13Firefox Full support 53
Full support 53
No support 22 — 53
Notes
Notes pathname and search returned the wrong values so that for a URL of http://z.com/x?a=true&b=false, pathname would return "/x?a=true&b=false" and search would return "", rather than "/x" and "?a=true&b=false" respectively.
IE No support NoOpera Full support YesSafari Full support 10WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 53
Full support 53
No support 22 — 53
Notes
Notes pathname and search returned the wrong values so that for a URL of http://z.com/x?a=true&b=false, pathname would return "/x?a=true&b=false" and search would return "", rather than "/x" and "?a=true&b=false" respectively.
Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
searchParamsChrome Full support 51Edge Full support 17Firefox Full support 29IE No support NoOpera Full support 38Safari Full support 10WebView Android Full support 51Chrome Android Full support 51Firefox Android Full support 29Opera Android Full support 41Safari iOS Full support 10Samsung Internet Android Full support 5.0
toJSONChrome Full support 71Edge Full support 17Firefox Full support 54IE No support NoOpera Full support YesSafari Full support YesWebView Android Full support 71Chrome Android Full support 71Firefox Android Full support 54Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support 10.0
toStringChrome Full support 19Edge Full support 17Firefox Full support 54IE No support NoOpera Full support YesSafari Full support YesWebView Android Full support ≤37Chrome Android Full support 25Firefox Android Full support 54Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support 6.0
usernameChrome Full support 32Edge Full support 12Firefox Full support 26IE No support NoOpera Full support YesSafari Full support 10WebView Android Full support ≤37Chrome Android Full support 32Firefox Android Full support 26Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support 6.0

Legend

Full support  
Full support
Partial support  
Partial support
No support  
No support
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
See implementation notes.
See implementation notes.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

另见