In this article, you’ll learn how to redirect from one page to another in javascript. Javascript offers various ways to redirect from one webpage to another webpage.
Here are some examples to redirect from one webpage to another webpage.
The location.href property in HTML is used to set or return the complete URL of the current page. Changing the value of the property will redirect the page to the specified webpage. The source code of the location.href example is given below:
<!DOCTYPE html>
<html>
<body style="text-align:center">
<h2>Welcome to <span style="color:purple">Tutorials</span><strong>Rack</strong></h2>
<p>This is the example of <i>location.href</i> way.</p>
<button onclick="redirect()">Click me</button>
<!--script to redirect from one webpage to another webpage-->
<script>
function redirect() {
window.location.href = "https://www.wikipedia.org/";
}
</script>
</body>
</html>
The replace() method of the Location interface replaces the current resource with the one at the specified URL. window.location.replace() is better than using window.location.href because after using replace() the current page will not be saved in session History, meaning the user won't be able to use the back button to navigate to it. The source code of the location.replace() example is given below:
<!DOCTYPE html>
<html>
<body style="text-align:center">
<h2>Welcome to <span style="color:purple">Tutorials</span><strong>Rack</strong></h2>
<p>This is the example of <i>location.replace</i> way.</p>
<button onclick="redirect()">Click me</button>
<!--script to redirect from one webpage to another webpage-->
<script>
function redirect() {
window.location.replace("https://www.wikipedia.org/");
}
</script>
</body>
</html>
The location.assign() method causes the window to load and display the document at the URL specified. After the navigation occurs, the user can go back to the webpage that is called location.assign() by pressing the "back" button. The source code of the location.assign() example is given below:
<!DOCTYPE html>
<html>
<body style="text-align:center">
<h2>Welcome to <span style="color:purple">Tutorials</span><strong>Rack</strong></h2>
<p>This is the example of <i>location.assign</i> way.</p>
<button onclick="redirect()">Click me</button>
<!--script to redirect from one webpage to another webpage-->
<script>
function redirect() {
window.location.assign("https://www.wikipedia.org/");
}
</script>
</body>
</html>
I hope this article will help you to understand how to redirect from one webpage to another in javascript.
Share your valuable feedback, please post your comment at the bottom of this article. Thank you!
Comments