When building a website, developers often need to work with page URLs. For example, a website might redirect a user after login to another page, send them to a payment page, or simply show the current page URL for debugging.
In JavaScript, one of the easiest ways to handle this condition is by using window.location.href.
This property allows you to get the current page URL and also redirect users to another webpage. Because of its simplicity, developers use it very frequently in real-world web applications.
In this guide, we will learn what window.location.href is, how it works, and how to use it with practical examples.
What is window.location.href in JavaScript?
In simple terms, window.location.href represents the full URL of the current webpage.
Think about the address bar in your browser. Whatever URL you see there is exactly what window.location.href returns in JavaScript.
However, this property does more than just show the URL. If you assign a new URL to it, the browser will immediately navigate to that page.
For example, imagine a user logs in successfully. After login, you may want to send the user to a dashboard page. In that situation, you can simply update window.location.href.
Example
console.log(window.location.href);
If the user is visiting –
https://example.com/blog/javascript
The code will print the same URL in the console.
So basically, this property always reflects the current page address.
Syntax of window.location.href
Using window.location.href is very simple. You can either read the URL or change it.
Get the Current URL
window.location.href
Redirect to Another Page
window.location.href = "https://example.com"
In the first case, JavaScript simply returns the current URL. On the other hand, in the second case, the browser loads a new webpage.
Because of this behavior, developers often use it for page navigation.
Getting the Current Page URL
Sometimes you may want to know exactly which page the user is visiting. For example, analytics scripts often track the current URL.
In such cases, you can store the value of window.location.href in a variable.
Example
let currentPage = window.location.href;
console.log(currentPage);
Now suppose the user is on this page:
https://mysite.com/contact
The variable currentPage will store that exact URL.
This approach becomes very useful when debugging code or tracking page visits.
Redirecting Users Using window.location.href
One of the most common uses of window.location.href is redirecting users to another page.
Instead of asking the user to click a link manually, JavaScript can automatically send them to the required page.
Example
window.location.href = "https://example.com/dashboard";
As soon as this line runs, the browser opens the dashboard page.
For example, many websites redirect users after they log in successfully.
Redirecting Users After a Button Click
Sometimes you may want to redirect users only when they click a button.
For instance, imagine a button that takes users to their profile page.
Example
function goToProfile() {
window.location.href = "https://example.com/profile";
}
<button onclick="goToProfile()">Go to Profile</button>
When the user clicks the button, the function runs and the browser loads the profile page.
This technique is very common in navigation menus and dashboard pages.
Redirect After Form Submission
Another practical example appears in forms.
Let’s say a user submits a contact form. After submission, the website may show a thank you page.
Instead of refreshing the page manually, you can redirect the user automatically.
Example
function submitForm() {
window.location.href = "thank-you.html";
}
Once the form is submitted, the user lands on the confirmation page.
This improves the user experience because visitors immediately know that the form submission was successful.
window.location.href vs window.location.replace()
JavaScript also provides another method called location.replace(). Both methods redirect users, but they behave slightly differently.
The difference mainly affects browser history.
➤ window.location.href
window.location.href = “https://example.com/home”;
Here the browser loads the new page, but it keeps the current page in history.
That means the user can click the Back button to return to the previous page.
➤ window.location.replace()
window.location.replace("https://example.com/home");
This method redirects the user but removes the current page from browser history.
Because of this, the user cannot go back to the previous page.
Many websites use this technique after login to prevent users from returning to the login page.
Common Use Cases of window.location.href
Developers use window.location.href in many real-life situations. Let’s look at a few simple examples.
1 Redirect After Login
After a successful login, a website often sends users to their dashboard.
Example:
window.location.href = "/dashboard"
2 Redirect After Logout
Similarly, websites often redirect users to the homepage after they log out.
Example:
window.location.href = "/home"
3 Track the Current Page
Sometimes developers just want to check which page is currently open.
Example:
console.log(window.location.href)
This helps during debugging or analytics tracking.
Advantages of Using window.location.href
The window.location.href property is popular for several reasons.
➤ Easy to Use
First of all, the syntax is extremely simple. Even beginners can understand it quickly.
➤ Works Everywhere
Another advantage is that it works in all modern browsers without any extra libraries.
➤ Useful for Navigation
Finally, developers can easily control page navigation with just one line of code.
Limitations of window.location.href
Even though window.location.href is useful, it does have some limitations.
➤ Page Reload Happens
Whenever you change the URL, the browser reloads the entire page.
➤ Limited for Modern Apps
Modern JavaScript frameworks like React often use client-side routing instead of full-page redirects.
Still, for many simple websites, window.location.href works perfectly.
Bottom Line
The window.location.href property is one of the simplest ways to work with URLs in JavaScript. It allows developers to check the current page address and redirect users to other pages.
Because the syntax is easy and the behavior is predictable, developers frequently use it for navigation, redirects, and debugging.
If you are learning JavaScript, understanding window.location.href will definitely help you manage browser navigation more effectively.
Read Also – location.reload(true)
