URL

URL interface is used to parse, construct, normalize, and encode URLs . It works by providing properties which allow you to easily read and modify the components of a URL. You normally create a new URL object by specifying the URL as a string when calling its constructor, or by providing a relative URL and a base URL. You can then easily read the parsed components of the URL or make changes to the URL.

If a browser doesn't yet support the URL() constructor, you can access a URL object using the Window interface's Window.URL property. Be sure to check to see if any of your target browsers require this to be prefixed.

注意: 此特征可用于 Web 工作者 .

构造函数

new URL()
Creates and returns a URL object referencing the URL specified using an absolute URL string, or a relative URL string and a base URL string.

特性

hash
A USVString 包含 '#' followed by the fragment identifier of the URL.
host
A USVString containing the domain (that is the hostname ) followed by (if a port was specified) a ':' port of the URL.
hostname
A USVString 包含 URL 的域。
href
A stringifier that returns a USVString containing the whole URL.
origin 只读
返回 USVString containing the origin of the URL, that is its scheme, its domain and its port.
password
A USVString containing the password specified before the domain name.
pathname
A USVString 包含初始 '/' followed by the path of the URL.
port
A USVString 包含 URL 的端口号。
protocol
A USVString 包含 URL 的协议方案,包括最终的 ':' .
search
A USVString indicating the URL's parameter string; if any parameters are provided, this string includes all of them, beginning with the leading ? character.
searchParams 只读
A URLSearchParams object which can be used to access the individual query parameters found in search .
username
A USVString containing the username specified before the domain name.

方法

toString()
返回 USVString containing the whole URL. It is a synonym for URL.href , though it can't be used to modify the value.
toJSON()
返回 USVString containing the whole URL. It returns the same string as the href 特性。

静态方法

createObjectURL()
返回 DOMString containing a unique blob URL, that is a URL with blob: as its scheme, followed by an opaque string uniquely identifying the object in the browser.
revokeObjectURL()
Revokes an object URL previously created using URL.createObjectURL() .

Usage notes

The constructor takes a url parameter, and an optional base parameter to use as a base if the url parameter is a relative URL:

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

URL properties can be set to construct the URL:

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

URLs are encoded according to the rules found in RFC 3986 . For instance:

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

URLSearchParams interface can be used to build and manipulate the URL query string.

To get the search params from the current window's URL, you can do this:

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

toString() method of URL just returns the value of the href property, so the constructor can be used to normalize and encode a URL directly.

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

规范

规范 状态 Comment
File API
The definition of 'URL' in that specification.
工作草案 Added the static methods URL.createObjectURL() and URL.revokeObjectURL () .
URL
The definition of 'API' in that specification.
实时标准 Initial definition (implements URLUtils ).

浏览器兼容性

更新 GitHub 上的兼容性数据
Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
URL Chrome 32
32
19
Prefixed
Prefixed Implemented with the vendor prefix: webkit
Edge 12 Firefox 19
19
Before version 57, Firefox had a bug whereby single quotes contained in URLs are escaped when accessed via URL APIs (see bug 1386683 ).
To use it from chrome code, JSM and Bootstrap scope, you have to import it with Cu.importGlobalProperties(['URL']); .
IE 10 Opera 19
19
15
Prefixed
Prefixed Implemented with the vendor prefix: webkit
Safari 7
7
6
Prefixed
Prefixed Implemented with the vendor prefix: webkit
WebView Android 4.4
4.4
4
Prefixed
Prefixed Implemented with the vendor prefix: webkit
Chrome Android 32
32
25
Prefixed
Prefixed Implemented with the vendor prefix: webkit
Firefox Android 19
19
Before version 57, Firefox had a bug whereby single quotes contained in URLs are escaped when accessed via URL APIs (see bug 1386683 ).
To use it from chrome code, JSM and Bootstrap scope, you have to import it with Cu.importGlobalProperties(['URL']); .
Opera Android 19
19
14
Prefixed
Prefixed Implemented with the vendor prefix: webkit
Safari iOS 7
7
6
Prefixed
Prefixed Implemented with the vendor prefix: webkit
Samsung Internet Android 2.0
2.0
1.5
Prefixed
Prefixed Implemented with the vendor prefix: webkit
URL() 构造函数 Chrome 19 Edge 12 Firefox 26 IE No Opera 15 Safari 6 WebView Android ≤37 Chrome Android 25 Firefox Android 26 Opera Android 14 Safari iOS 6 Samsung Internet Android 1.5
createObjectURL
Chrome 19 Edge 12 Firefox 19
19
createObjectURL() is no longer available within the context of a ServiceWorker .
IE 10
10
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 15 Safari 6 WebView Android Yes Chrome Android 25 Firefox Android 19
19
createObjectURL() is no longer available within the context of a ServiceWorker .
Opera Android 14 Safari iOS 6 Samsung Internet Android 1.5
hash Chrome Yes Edge 13 Firefox 22 IE No Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android 22 Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
host Chrome Yes Edge 13 Firefox 22 IE No Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android 22 Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
hostname Chrome Yes Edge 13 Firefox 22 IE No Opera Yes Safari 10 WebView Android Yes Chrome Android Yes Firefox Android 22 Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
href Chrome Yes Edge 13 Firefox 22 IE No Opera Yes Safari 10 WebView Android Yes Chrome Android Yes Firefox Android 22 Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
origin Chrome 32 Edge 12 Firefox 26
26
不支持 26 — 49
Results for URL 使用 blob scheme incorrectly returned null .
IE No Opera Yes Safari 10 WebView Android ≤37 Chrome Android 32 Firefox Android 26
26
不支持 26 — 49
Results for URL 使用 blob scheme incorrectly returned null .
Opera Android Yes Safari iOS Yes Samsung Internet Android 6.0
password Chrome 32 Edge 12 Firefox 26 IE No Opera Yes Safari 10 WebView Android ≤37 Chrome Android 32 Firefox Android 26 Opera Android Yes Safari iOS Yes Samsung Internet Android 6.0
pathname Chrome Yes Edge 13 Firefox 53
53
不支持 22 — 53
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 Opera Yes Safari 10 WebView Android Yes Chrome Android Yes Firefox Android 53
53
不支持 22 — 53
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 Yes Safari iOS Yes Samsung Internet Android Yes
port Chrome Yes Edge 13 Firefox 22 IE No Opera Yes Safari 10 WebView Android Yes Chrome Android Yes Firefox Android 22 Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
protocol Chrome Yes Edge 13 Firefox 22 IE No Opera Yes Safari 10 WebView Android Yes Chrome Android Yes Firefox Android 22 Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
revokeObjectURL
Chrome 19 Edge 12 Firefox 19
19
revokeObjectURL() is no longer available within the context of a ServiceWorker .
IE 10 Opera 15 Safari 6 WebView Android ≤37 Chrome Android 25 Firefox Android 19
19
revokeObjectURL() is no longer available within the context of a ServiceWorker .
Opera Android 14 Safari iOS 6 Samsung Internet Android 1.5
search Chrome Yes Edge 13 Firefox 53
53
不支持 22 — 53
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 Opera Yes Safari 10 WebView Android Yes Chrome Android Yes Firefox Android 53
53
不支持 22 — 53
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 Yes Safari iOS Yes Samsung Internet Android Yes
searchParams Chrome 51 Edge 17 Firefox 29 IE No Opera 38 Safari 10 WebView Android 51 Chrome Android 51 Firefox Android 29 Opera Android 41 Safari iOS 10 Samsung Internet Android 5.0
toJSON Chrome 71 Edge 17 Firefox 54 IE No Opera Yes Safari Yes WebView Android 71 Chrome Android 71 Firefox Android 54 Opera Android Yes Safari iOS Yes Samsung Internet Android 10.0
toString Chrome 19 Edge 17 Firefox 54 IE No Opera Yes Safari Yes WebView Android ≤37 Chrome Android 25 Firefox Android 54 Opera Android Yes Safari iOS Yes Samsung Internet Android 6.0
username Chrome 32 Edge 12 Firefox 26 IE No Opera Yes Safari 10 WebView Android ≤37 Chrome Android 32 Firefox Android 26 Opera Android Yes Safari iOS Yes Samsung Internet Android 6.0

图例

完整支持
完整支持
不支持
不支持
实验。期望将来行为有所改变。
实验。期望将来行为有所改变。
见实现注意事项。
要求使用供应商前缀或不同名称。
要求使用供应商前缀或不同名称。

另请参阅