Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How can a page be forced to load another page in JavaScript?
In JavaScript, we can use window.location object to force a page to load another page. We can use the location object to set the URL of a new page. There are different ways – window.location.href property, window.location.assign() and window.location.replace() methods, to set the URL of a new page using the location object. We will discuss each of the property and methods in detail in this tutorial.
Window.location.replace
The first way is to use the window.location.href property. This property contains information about the current URL of the page, and it can be used to redirect the user to a new page.
Syntax
window.location.href = "new_url";
The user will be immediately redirected to the specified URL (new_url).
To redirect the user after a specified amount of time has passed, we may also specify the setTimout function which allows the user to redirect to the source URL after the time specified in the function.
setTimeout(function() {
window.location.href = "https://www.tutorialspoint.com";
}, 3000);
The above example will redirect the user to the given URL (https://www.tutorialspoint.com) after 3 seconds have passed.
Example
In this example, we have defined a button (Load) that when clicked renders a function forceLoad(). In the forceLoad() fucntion we use window.location.href property to reload new page- tutorialspoint home page.
<html>
<body>
<h2>Forced Load page using window.location.href property</h2>
<p>Click on the below button to force reload new page</p>
<button onclick="forceLoad()">Load</button>
<script>
function forceLoad() {
window.location.href = "https://www.tutorialspoint.com";
}
</script>
</body>
</html>
window.location.replace
Another way for redirecting forcefully to another page is to use the window.location.replace property. This method helps in replacing the current page in the browser's history with another page, but here the user will not be able to return back to the original page.
Syntax
window.location.replace("new_url");
In this syntax, we will have the same effect as the window.location.href example, but here the difference is that the current page of the user will not be stored in the browser's history.
Example
In this example, we have defined a button (Load) that when clicked renders a function forceLoad(). The forceLoad() function renders a JavaScript method- location.replace() that replaces the current source with the one at the provided URL in the function.
Note that, once the navigation occurs, it does not allow the users to navigate back to the previous page which is possible in the case of location.assign() property in javascript.
<html>
<body>
<h2>Forced Load page using window.location.replace() method</h2>
<p>Click below button force reload new page</p>
<button onclick="forceLoad()">Load</button>
<script>
function forceLoad() {
window.location.replace("https://www.tutorialspoint.com");
}
</script>
</body>
</html>
window.location.assign
In this method, we use the window.location.assign method which is used to add a new page to the browser's history allowing the users to return back to the original page browsed by the user.
Syntax
window.location.assign("new_url");
In this syntax, it will have the same effect as the window.location example, but here the difference is that the current page of the user will be stored in the browser's history.
Example
In this example, we have defined a button (Load) that when clicked renders a function forceLoad(). The forceLoad() function renders a JavaScript method- location.assign() that causes the window to load and display the document or page at the current URL specified. Once the navigation occurs, it also allows the users to navigate back to the previous page with the help of a property called Location.assign(), just by pressing the "back" button of the browser.
<html>
<body>
<h2>Window.location.assign() method</h2>
<button onclick="forceLoad()">Load</button>
<script>
function forceLoad() {
location.assign("https://www.tutorialspoint.com");
}
</script>
</body>
</html>
Difference between window.location, window.location.replace, and window.location.assign
| Basis | window.location.href | window.location.assign | window.location.replace |
|---|---|---|---|
| Definition | It gets the current URL and redirects to a new document or page specified at the URL. | It loads and displays the document or page specified at the URL. | It replaces the current page with the one specified in the URL. |
| Browser History | It does not add the newly loaded document or page to the browser history. | It saves the newly loaded document or page in the browser history. | It also saves the newly loaded document or page in the browser history. |
| Go back | It allows the user to return to the previous page/document. | It also allows the user to return to the previous page. | It does not allow the user to return to the previous page. |
The main difference between window.location.href property, window.location.replace(), and window.location.assign() methods are how they handle the browser's history. If we talk about location.replace method, it will replace the current URL and does not allow the user to return to the previous page. The location.assign method will load a new document and also adds it to the browser's history, simultaneously allowing the user to return to the previous open page. Lastly, the window.location method is the same as the location.assign as it also adds the new document to the browser's history.
Conclusion
Concluding the article, loading a new page forcefully to another page in JavaScript is an easy task that can be accomplished using multiple JavaScript methods i.e, window.location.href property, the window.location.replace() method or the window.location.assign() method. All of these methods help the developers with the ability to create dynamic and interactive web pages that help in creating better user interactions & enhance the user application experience.
5K+ Views
