W3cubDocs

/DOM

URL

The URL interface represents an object providing static methods used for creating object URLs.

When using a user agent where no constructor has been implemented yet, it is possible to access such an object using the Window.URL properties (prefixed with Webkit-based browser as Window.webkitURL).

Note: This feature is available in Web Workers.

Usage

URL is used to parse, construct, normalise, and encode URLs.

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 will be encoded as per RFC 3986:

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

The 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
var parsedUrl = new URL(window.location.href);
console.log(parsedUrl.searchParams.get("id")); // 123

The toString method of URL is the href property, so the constructor can be used to normalise and encode a URL directly.

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

Constructor

URL()
Creates and return a URL object composed from the given parameters.

Properties

URL.hash
Is a DOMString containing a '#' followed by the fragment identifier of the URL.
URL.host
Is a DOMString containing the domain (that is the hostname) followed by (if a port was specified) a ':' and the port of the URL.
URL.hostname
Is a DOMString containing the domain of the URL.
URL.href
Is a DOMString containing the whole URL.
URL.origin Read only
Returns a DOMString containing the origin of the URL, that is its scheme, its domain and its port.
URL.password
Is a DOMString containing the password specified before the domain name.
URL.pathname
Is a DOMString containing an initial '/' followed by the path of the URL.
URL.port
Is a DOMString containing the port number of the URL.
URL.protocol
Is a DOMString containing the protocol scheme of the URL, including the final ':'.
URL.search
Is a DOMString containing a '?' followed by the parameters of the URL.
URL.searchParams Read only
Returns a URLSearchParams object allowing to access the GET query arguments contained in the URL.
URL.username
Is a DOMString containing the username specified before the domain name.
Methods

The URL interface implements methods defined in URLUtils.

URLUtils.toString()
Returns a DOMString containing the whole URL. It is a synonym for URLUtils.href, though it can't be used to modify the value.
URL.toJSON() [available since Firefox v54]
Returns a DOMString containing the whole URL. It returns the same string as the href property.

Static methods

URL.createObjectURL()
Returns a 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.
URL.revokeObjectURL()
Revokes an object URL previously created using URL.createObjectURL().

Specifications

Specification Status Comment
File API
The definition of 'URL' in that specification.
Working Draft Added the static methods URL.createObjectURL() and URL.revokeObjectURL().
URL
The definition of 'API' in that specification.
Living Standard Initial definition (implements URLUtils).

Browser compatibilityUpdate compatibility data on GitHub

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
Basic support 32
32
2
Prefixed
Prefixed Implemented with the vendor prefix: webkit
12 19
19
Firefox had a bug whereby single quotes contained in URLs are escaped when accessed via URL APIs (see bug 1386683). This has been fixed as of Firefox 57.
To use it from chrome code, JSM and Bootstrap scope, you have to import it with Cu.importGlobalProperties(['URL']);.
4 — 18
This interface was supported with the non-standard nsIDOMMozURLProperty internal type. However this didn't make any difference in practice, as the only way to access such an object was through window.URL.
? 19
19
15
Prefixed
Prefixed Implemented with the vendor prefix: webkit
7
7
6
Prefixed
Prefixed Implemented with the vendor prefix: webkit
URL() constructor Yes 12 26 ? — 11 Yes Yes
createObjectURL 8 12 4
4
createObjectURL() is no longer available within the context of a ServiceWorker.
10 15 6
hash Yes 13 22 Yes Yes Yes
host Yes 13 22 ? Yes Yes
hostname Yes 13 22 ? Yes 10
href Yes 13 22 ? Yes 10
origin 52 12
12
Defined in another interface but available to use from URL.
26
26
26 — 44
This property was on the URLUtils mixin. It has been moved either to the HTMLHyperlinkElementUtils mixin, or directly on the interface.
26 — 49
Results for URL using the blob scheme incorrectly returned null.
? Yes
Yes
Defined in another interface but available to use from URL.
10
10
Defined in another interface but available to use from URL.
password 52 12
12
Defined in another interface but available to use from URL.
26 ? Yes
Yes
Defined in another interface but available to use from URL.
10
10
Defined in another interface but available to use from URL.
pathname Yes 13 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.
? Yes 10
port Yes 13 22 ? Yes 10
protocol Yes 13 22 ? Yes 10
revokeObjectURL 8 12 4
4
revokeObjectURL() is no longer available within the context of a ServiceWorker.
10 15 6
search Yes 13 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.
? Yes 10
searchParams 51 17 52 No Yes 10
toJSON ? 17 54 ? ? ?
username 52 12
12
Defined in another interface but available to use from URL.
26 ? Yes
Yes
Defined in another interface but available to use from URL.
10
10
Defined in another interface but available to use from URL.
Mobile
Android webview Chrome for Android Edge Mobile Firefox for Android Opera for Android iOS Safari Samsung Internet
Basic support 4.4
4.4
4
Prefixed
Prefixed Implemented with the vendor prefix: webkit
32
32
18
Prefixed
Prefixed Implemented with the vendor prefix: webkit
12 19
19
Firefox had a bug whereby single quotes contained in URLs are escaped when accessed via URL APIs (see bug 1386683). This has been fixed as of Firefox 57.
To use it from chrome code, JSM and Bootstrap scope, you have to import it with Cu.importGlobalProperties(['URL']);.
14 — 18
This interface was supported with the non-standard nsIDOMMozURLProperty internal type. However this didn't make any difference in practice, as the only way to access such an object was through window.URL.
19
19
15
Prefixed
Prefixed Implemented with the vendor prefix: webkit
7
7
6
Prefixed
Prefixed Implemented with the vendor prefix: webkit
?
URL() constructor Yes Yes 12 26 Yes Yes ?
createObjectURL ? 18 ? 4
4
createObjectURL() is no longer available within the context of a ServiceWorker.
15 6 ?
hash Yes Yes Yes 22 ? ? ?
host Yes Yes Yes 22 ? ? ?
hostname Yes Yes Yes 22 ? ? ?
href Yes Yes Yes 22 ? ? ?
origin 52 52 12
12
Defined in another interface but available to use from URL.
26
26
26 — 44
This property was on the URLUtils mixin. It has been moved either to the HTMLHyperlinkElementUtils mixin, or directly on the interface.
26 — 49
Results for URL using the blob scheme incorrectly returned null.
Yes
Yes
Defined in another interface but available to use from URL.
Yes
Yes
Defined in another interface but available to use from URL.
?
password 52 52 12
12
Defined in another interface but available to use from URL.
26 Yes
Yes
Defined in another interface but available to use from URL.
Yes
Yes
Defined in another interface but available to use from URL.
?
pathname Yes Yes ? 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.
? ? ?
port Yes Yes ? 22 ? ? ?
protocol Yes Yes ? 22 ? ? ?
revokeObjectURL ? 18 ? 4
4
revokeObjectURL() is no longer available within the context of a ServiceWorker.
15 6 ?
search Yes Yes ? 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.
? ? ?
searchParams 51 51 ? 52 ? ? ?
toJSON ? ? ? 54 ? ? ?
username 52 52 12
12
Defined in another interface but available to use from URL.
26 Yes
Yes
Defined in another interface but available to use from URL.
Yes
Yes
Defined in another interface but available to use from URL.
?

See also

© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/URL