You want to get the current website URL on a page. How do you do this?
There are multiple ways to get the current URL using JavaScript. Technically, we’ll use Web APIs, which are not a part of the JavaScript language but are used with JavaScript. You can use the globally scoped Window
and Document
web API interfaces to get the current URL in a browser.
The Window
interface represents a window containing a DOM
document. It has a document
property that points to the DOM Document
loaded in the window. This is the Document
interface that represents the DOM tree
of a loaded web page in the browser.
The window.location
and document.location
(which is the same as window.document.location
) properties are read-only and return a Location
object. This object contains information about the current URL, including the following properties:
{
"ancestorOrigins": {},
"href": "https://sentry.io/answers/capture-errors/",
"origin": "https://sentry.io",
"protocol": "https:",
"host": "sentry.io",
"hostname": "sentry.io",
"port": "",
"pathname": "/answers/capture-errors/",
"search": "",
"hash": ""
}
To get the current URL, get the href
property value:
window.location.href // 'https://sentry.io/answers/capture-errors/'
// or
document.location.href // 'https://sentry.io/answers/capture-errors/'
You can also get the values of the following properties on the window
object to get the current URL:
document.URL // 'https://sentry.io/answers/capture-errors/'
document.documentURI // 'https://sentry.io/answers/capture-errors/'
If you need to parse the URL, you can create a URL
interface with the current URL. It has useful methods for parsing a URL, for example, you can get search parameter values by their names:
const urlObj = new URL(window.location.href);
console.log(urlObj.href) // https://unsplash.com/s/photos/cat?order_by=latest&orientation=landscape&color=yellow
console.log(urlObj.searchParams.get('color')); // yellow
The URL
interface is also used to construct, normalize, and encode URLs.