Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML DOM Location href Property
The HTML DOM Location href property returns or sets the complete URL of the current page. This property provides access to the entire URL including protocol, hostname, port, path, search parameters, and fragment identifier.
Syntax
Following is the syntax for getting the href property −
location.href
Following is the syntax for setting the href property −
location.href = "URL"
Parameters
The location.href property accepts the following parameter when setting a value −
-
URL − A string representing the complete URL to navigate to. This can be an absolute URL (e.g.,
https://example.com) or a relative URL (e.g.,/page.html).
Return Value
When accessed, location.href returns a string containing the complete URL of the current page, including the protocol, domain, path, query string, and fragment identifier.
Getting Current URL
The most common use of location.href is to retrieve the current page's URL for logging, debugging, or conditional logic purposes.
Example
<!DOCTYPE html>
<html>
<head>
<title>Location href - Get URL</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Current Page URL</h2>
<button onclick="showCurrentURL()">Get Current URL</button>
<p id="result"></p>
<script>
function showCurrentURL() {
var currentURL = location.href;
document.getElementById("result").innerHTML = "<strong>Current URL:</strong> " + currentURL;
}
</script>
</body>
</html>
The output displays the complete URL of the current page when the button is clicked −
Current URL: https://www.tutorialspoint.com/example.html
Navigating to Different URLs
Setting location.href to a new URL navigates the browser to that location, similar to clicking a link or entering a URL in the address bar.
Example − Navigation with Buttons
<!DOCTYPE html>
<html>
<head>
<title>Location href - Navigation</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Navigate to Different Sites</h2>
<button onclick="goToGoogle()">Go to Google</button>
<button onclick="goToGitHub()">Go to GitHub</button>
<button onclick="goToTutorialsPoint()">Go to TutorialsPoint</button>
<script>
function goToGoogle() {
location.href = "https://www.google.com";
}
function goToGitHub() {
location.href = "https://www.github.com";
}
function goToTutorialsPoint() {
location.href = "https://www.tutorialspoint.com";
}
</script>
</body>
</html>
Clicking any button navigates to the respective website by setting location.href to the target URL.
Example − Relative URL Navigation
<!DOCTYPE html>
<html>
<head>
<title>Location href - Relative URLs</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Relative URL Navigation</h2>
<p>Current URL: <span id="currentUrl"></span></p>
<button onclick="goToRelative()">Go to /contact.html</button>
<button onclick="goToParent()">Go to Parent Directory</button>
<script>
document.getElementById("currentUrl").textContent = location.href;
function goToRelative() {
location.href = "/contact.html";
}
function goToParent() {
location.href = "../";
}
</script>
</body>
</html>
This example demonstrates navigation using relative URLs, which are resolved relative to the current page's location.
URL Manipulation and Redirection
The location.href property is commonly used for conditional redirects, form submissions, and dynamic navigation based on user actions or application state.
Example − Conditional Redirect
<!DOCTYPE html>
<html>
<head>
<title>Location href - Conditional Redirect</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>User Access Control</h2>
<p>Enter password to access admin panel:</p>
<input type="password" id="password" placeholder="Enter password">
<button onclick="checkAccess()">Login</button>
<p id="message"></p>
<script>
function checkAccess() {
var password = document.getElementById("password").value;
var message = document.getElementById("message");
if (password === "admin123") {
message.innerHTML = "<span style='color: green;'>Access granted! Redirecting...</span>";
setTimeout(function() {
location.href = "/admin-panel.html";
}, 2000);
} else {
message.innerHTML = "<span style='color: red;'>Invalid password. Try again.</span>";
}
}
</script>
</body>
</html>
This example shows how location.href can be used for authentication-based redirection with a delay using setTimeout().
Common Use Cases
The location.href property is frequently used in the following scenarios −
- Page Redirects − Redirecting users after form submission, authentication, or based on certain conditions.
- URL Logging − Capturing the current URL for analytics, debugging, or user tracking purposes.
- Dynamic Navigation − Creating custom navigation controls that programmatically navigate to different pages.
- Single Page Applications − Managing browser history and URL updates in SPAs without full page reloads.
Comparison with Other Navigation Methods
| Method | Behavior | History Entry |
|---|---|---|
location.href = "url" |
Navigates to new URL | Creates new history entry |
location.replace("url") |
Replaces current page | Replaces current history entry |
location.assign("url") |
Loads new document | Creates new history entry |
window.open("url") |
Opens in new window/tab | No effect on current page history |
Conclusion
The location.href property is a versatile tool for both reading the current page URL and navigating to new locations. It provides complete URL information and enables seamless page redirection, making it essential for dynamic web applications and user navigation control.
218 Views
