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
How can a page be forced to load another page in JavaScript?
In JavaScript, you can force a page to load another page using the window.location object. This object provides three main approaches: window.location.href property, window.location.assign() method, and window.location.replace() method. Each handles browser history differently, making them suitable for different use cases.
Using window.location.href
The window.location.href property contains the current URL and can redirect users to a new page. This is the most commonly used method for page redirection.
Syntax
window.location.href = "new_url";
You can also use setTimeout() to redirect after a delay:
<html>
<body>
<h3>Delayed Redirect Example</h3>
<p>Page will redirect in 3 seconds...</p>
<script>
setTimeout(function() {
window.location.href = "https://www.tutorialspoint.com";
}, 3000);
</script>
</body>
</html>
Example
Here's a complete example with a button that triggers immediate redirection:
<html>
<body>
<h3>Force Load using window.location.href</h3>
<p>Click the button to redirect to TutorialsPoint</p>
<button onclick="forceLoad()">Load New Page</button>
<script>
function forceLoad() {
window.location.href = "https://www.tutorialspoint.com";
}
</script>
</body>
</html>
Using window.location.replace()
The window.location.replace() method replaces the current page without adding it to the browser's history. Users cannot use the back button to return to the original page.
Syntax
window.location.replace("new_url");
Example
<html>
<body>
<h3>Force Load using window.location.replace()</h3>
<p>Click below button to replace current page (no back button)</p>
<button onclick="forceLoad()">Replace Page</button>
<script>
function forceLoad() {
window.location.replace("https://www.tutorialspoint.com");
}
</script>
</body>
</html>
Using window.location.assign()
The window.location.assign() method loads a new page and adds it to the browser's history, allowing users to navigate back using the back button.
Syntax
window.location.assign("new_url");
Example
<html>
<body>
<h3>Force Load using window.location.assign()</h3>
<p>Click button to load new page (back button works)</p>
<button onclick="forceLoad()">Assign New Page</button>
<script>
function forceLoad() {
window.location.assign("https://www.tutorialspoint.com");
}
</script>
</body>
</html>
Comparison of Methods
| Method | Browser History | Back Button Works | Use Case |
|---|---|---|---|
window.location.href |
Adds to history | Yes | Standard navigation |
window.location.assign() |
Adds to history | Yes | Programmatic navigation |
window.location.replace() |
Replaces current entry | No | Login redirects, error pages |
Key Differences
The main distinction lies in browser history handling:
- href and assign(): Add new entries to history, enabling back navigation
- replace(): Overwrites current history entry, preventing back navigation
Use replace() for login redirects or error pages where you don't want users returning to the previous state. Use href or assign() for standard navigation.
Conclusion
JavaScript provides three effective methods to force page redirection. Choose window.location.href for most cases, window.location.assign() for programmatic control, and window.location.replace() when you need to prevent back navigation.
7K+ Views
