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 Location assign( ) Method
The HTML Location assign() method loads a new document at the specified URL. Unlike setting window.location.href directly, this method explicitly adds an entry to the browser's history, allowing users to navigate back to the previous page using the back button.
Syntax
Following is the syntax for the Location assign() method −
location.assign(URL)
Parameters
The method accepts the following parameter −
URL − A string representing the absolute or relative URL of the page to navigate to.
Return Value
This method does not return any value. It performs navigation as a side effect.
How It Works
When location.assign() is called, the browser:
Loads the new document at the specified URL
Adds the current page to the browser history
Allows the user to return to the previous page using the back button
Triggers the same security checks as clicking a link
Example − Basic Navigation
Following example demonstrates the basic usage of the Location assign() method −
<!DOCTYPE html>
<html>
<head>
<title>Location assign() Method</title>
</head>
<body style="font-family: Arial, sans-serif; text-align: center; padding: 20px;">
<h1>HTML Location assign() Method Demo</h1>
<p>Click the button to navigate to TutorialsPoint</p>
<button onclick="navigateToTP()" style="background: #007bff; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer;">
Load TutorialsPoint
</button>
<script>
function navigateToTP() {
location.assign("https://www.tutorialspoint.com/");
}
</script>
</body>
</html>
Clicking the button will navigate to the TutorialsPoint homepage, and you can use the browser's back button to return to this page.
Example − Navigation with Delay
Following example shows how to implement delayed navigation −
<!DOCTYPE html>
<html>
<head>
<title>Delayed Navigation</title>
</head>
<body style="font-family: Arial, sans-serif; text-align: center; padding: 20px;">
<h1>Delayed Navigation Example</h1>
<p id="message">You will be redirected in 5 seconds...</p>
<button onclick="redirectNow()" style="background: #28a745; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer;">
Redirect Now
</button>
<script>
let countdown = 5;
const messageElement = document.getElementById("message");
// Start countdown
const timer = setInterval(function() {
countdown--;
messageElement.textContent = `You will be redirected in ${countdown} seconds...`;
if (countdown === 0) {
clearInterval(timer);
location.assign("https://www.tutorialspoint.com/html/");
}
}, 1000);
function redirectNow() {
clearInterval(timer);
location.assign("https://www.tutorialspoint.com/html/");
}
</script>
</body>
</html>
This example shows a countdown timer that automatically redirects after 5 seconds, or allows immediate redirection when the button is clicked.
Example − Multiple Navigation Options
Following example demonstrates navigation to different URLs based on user selection −
<!DOCTYPE html>
<html>
<head>
<title>Multiple Navigation Options</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Choose Your Tutorial</h2>
<div style="margin: 20px 0;">
<button onclick="navigateTo('html')" style="background: #e74c3c; color: white; padding: 10px 15px; margin: 5px; border: none; border-radius: 4px; cursor: pointer;">
HTML Tutorial
</button>
<button onclick="navigateTo('css')" style="background: #3498db; color: white; padding: 10px 15px; margin: 5px; border: none; border-radius: 4px; cursor: pointer;">
CSS Tutorial
</button>
<button onclick="navigateTo('javascript')" style="background: #f39c12; color: white; padding: 10px 15px; margin: 5px; border: none; border-radius: 4px; cursor: pointer;">
JavaScript Tutorial
</button>
</div>
<p id="status"></p>
<script>
function navigateTo(tutorial) {
const urls = {
'html': 'https://www.tutorialspoint.com/html/',
'css': 'https://www.tutorialspoint.com/css/',
'javascript': 'https://www.tutorialspoint.com/javascript/'
};
document.getElementById("status").textContent = `Loading ${tutorial.toUpperCase()} tutorial...`;
// Add small delay for better user experience
setTimeout(function() {
location.assign(urls[tutorial]);
}, 500);
}
</script>
</body>
</html>
This example provides multiple navigation options and shows loading status before redirecting to the selected tutorial page.
Comparison with Other Navigation Methods
Following table compares different navigation methods in JavaScript −
| Method | History Entry | Back Button | Use Case |
|---|---|---|---|
location.assign(url) |
Yes | Works | Standard navigation with history |
location.href = url |
Yes | Works | Most common navigation method |
location.replace(url) |
No | Skips current page | Redirects without history |
window.open(url) |
New window/tab | N/A | Opens in new window/tab |
Browser Compatibility
The location.assign() method is supported by all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer. It has been part of the JavaScript specification since early versions and provides reliable cross-browser navigation functionality.
Conclusion
The location.assign() method provides a clean way to programmatically navigate to new pages while preserving browser history. It is ideal for scenarios where you want users to be able to return to the previous page using the back button, making it suitable for most standard navigation needs in web applications.
235 Views
