URL

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()
返回一个DOMString ,包含一个唯一的blob链接(该链接协议为以blob:,后跟唯一标识浏览器中的对象的掩码)。
revokeObjectURL()
销毁之前使用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'));

规范

Specification Status Comment
File API
URL
Working Draft Added the static methods URL.createObjectURL() and URL.revokeObjectURL().
URL
Node
Living Standard Initial definition (implements URLUtils).

浏览器兼容性

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.

相关链接