How to Get the Current URL with JavaScript – JS Location Tutorial
Joel Olawanle
If you’re a web developer, you’ll work with JavaScript when building dynamic and interactive web applications. One common task that you’ll need to perform is getting the current URL of a web page.
In this article, you will learn how to get the current URL using JavaScript’s Location object. I’ll show you some examples alongside some best practices.
How to Use the Location Object
The Location object is a built-in JavaScript object that provides information about the current URL of a web page. It contains various properties allowing you to access and modify different parts of a URL.
To access the Location object, you can use the window.location property. This returns the Location object for the current web page. This object contains many data, such as the URL, pathname, origin, host, search data, and more.
How to Access the Current URL With JavaScript
One common use case for the Location object is to get the current URL of a web page. You can do this by accessing the href property of the Location object.
The href property contains the complete URL of the current web page:
This will log the current URL of the web page to the console.
How to Parse the Current URL With JavaScript
In addition to getting the current URL, you may need to parse it to extract specific parts. For example, you may want to extract the protocol, host, or path from the URL.
To parse the current URL, you can use the various properties of the Location object. For example, you can use the protocol property to get the protocol of the current URL:
This will log the protocol of the current URL (for example, «http:» or «https:») to the console.
Other properties of the Location object that you can use to extract parts of the current URL include host , hostname , port , pathname , search , and hash .
Using these properties, you can extract various parts of the current URL.
How to Update the Current URL With JavaScript
In addition to getting and parsing the current URL, you may need to update it. For example, you may need to redirect the user to a different URL or modify the current URL dynamically.
To update the current URL, you can use the various methods of the Location object. For example, you can use the replace() method to replace the current URL with a new URL:
This will replace the current URL with the new one, redirecting the user to the new page.
Best Practices When Working With the Location Object
When working with the Location object, there are some best practices that you should follow to avoid potential pitfalls. For example, you should always check if the Location object is available before using it.
You should also be careful when modifying the current URL, as it can affect the user’s browsing experience. For example, you should avoid modifying the URL’s protocol, host, or port unless absolutely necessary.
Conclusion
In this article, you have learned how to get the current URL of a web page using JavaScript’s Location object. By understanding how to work with the Location object, you can build more dynamic and interactive web applications that provide a better user experience.
Thank you for reading, and I hope you have found this article informative and helpful. You can read this article on how to refresh a page with JavaScript for more information on working with URLs in JavaScript.
If you would like to learn more about JavaScript and web development, Browse 200+ expert articles on web development written by me, and also check out my blog for more captivating content.
Window: location property
The Window.location read-only property returns a Location object with information about the current location of the document.
Though Window.location is a read-only Location object, you can also assign a string to it. This means that you can work with location as if it were a string in most cases: location = ‘http://www.example.com’ is a synonym of location.href = ‘http://www.example.com’ .
See Location for all available properties.
Value
Examples
Basic Example
Example 1: Navigate to a new page
Whenever a new value is assigned to the location object, a document will be loaded using the URL as if location.assign() had been called with the modified URL.
Note that navigation-related sandbox flags may result in an exception being thrown and the navigation failing.
Example 2: Reloading the current page
Example 3
Consider the following example, which will reload the page by using the replace() method to insert the value of location.pathname into the hash:
Example 4: Display the properties of the current URL in an alert dialog
Example 5: Send a string of data to the server by modifying the search property
The current URL with «?Some%20data» appended is sent to the server (if no action is taken by the server, the current document is reloaded with the modified search string).
Get the current URL with JavaScript?
All I want is to get the website URL. Not the URL as taken from a link. On the page loading I need to be able to grab the full, current URL of the website and set it as a variable to do with as I please.
26 Answers 26
As noted in the comments, the line below works, but it is bugged for Firefox.
URL Info Access
JavaScript provides you with many methods to retrieve and change the current URL, which is displayed in the browser’s address bar. All these methods use the Location object, which is a property of the Window object. You can read the current Location object by reading window.location :
Basic URL Structure
protocol: Specifies the protocol name be used to access the resource on the Internet. (HTTP (without SSL) or HTTPS (with SSL))
hostname: Host name specifies the host that owns the resource. For example, www.stackoverflow.com . A server provides services using the name of the host.
port: A port number used to recognize a specific process to which an Internet or other network message is to be forwarded when it arrives at a server.
pathname: The path gives info about the specific resource within the host that the Web client wants to access. For example, /index.html .
search: A query string follows the path component, and provides a string of information that the resource can utilize for some purpose (for example, as parameters for a search or as data to be processed).
hash: The anchor portion of a URL, includes the hash sign (#).
With these Location object properties you can access all of these URL components and what they can set or return:
JavaScript Window Location
The window.location object can be used to get the current page address (URL) and to redirect the browser to a new page.
Window Location
The window.location object can be written without the window prefix.
- window.location.href returns the href (URL) of the current page
- window.location.hostname returns the domain name of the web host
- window.location.pathname returns the path and filename of the current page
- window.location.protocol returns the web protocol used (http: or https:)
- window.location.assign() loads a new document
Window Location Href
The window.location.href property returns the URL of the current page.
Example
Display the href (URL) of the current page:
Window Location Hostname
The window.location.hostname property returns the name of the internet host (of the current page).
Example
Display the name of the host:
Window Location Pathname
The window.location.pathname property returns the pathname of the current page.
Example
Display the path name of the current URL:
Window Location Protocol
The window.location.protocol property returns the web protocol of the page.
Example
Display the web protocol:
Window Location Port
The window.location.port property returns the number of the internet host port (of the current page).
Example
Display the name of the host:
Most browsers will not display default port numbers (80 for http and 443 for https)
Window Location Assign
The window.location.assign() method loads a new document.
Example
Load a new document:
<input type="button" value="Load new document" onclick="newDoc()">
COLOR PICKER
Report Error
If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:
Thank You For Helping Us!
Your message has been sent to W3Schools.
Top Tutorials
Top References
Top Examples
Get Certified
W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.