Javascript Redirect URL to Another Web Page

by

Sometimes, You may need to redirect the URL to another web page using JavaScript. But you don’t have a good idea about the URL redirection. If you want to learn it then continue reading this tutorial. Here, I have shared some right methods with an example that is very simple to use & understand.

JavaScript URL Redirection

URL Redirection is the best technique to jump from a page to another page. It is also known as URL forwarding.

You have to use the javascript location object to redirect the URL. So you need to know some basic points about it.

The location object is related to the window object and It can be accessed using window.location the property

Syntax –

window.location

The window.location property contains all the information about the current page URL. It can redirect a URL to another page using many methods like location.assign, location.replace, location.navigate. Each method redirects a link in different ways.

Read also –

Get Query String Value From URL Using JavaScript

Convert HTML Page to PDF Using JavaScript

Convert HTML Table Data to Excel File Using JavaScript

 

Methods to Redirect URL Using JavaScript

JavaScript provides the following most popular methods for redirecting a URL. You can use one of the given methods. It depends on your requirement that how do you want to redirect the URL.

  1. window.location.href
  2. window.location.assign
  3. window.location.replace
  4. window.location.reload

 

1. window.location.href Property

window.location.href is a property and It is used to set or return the full URL of the current page.

  • If you want to redirect the URL then you will have to set a value to the window.location.href
  • If you want to get the full address of the current page then you will have to return a value of window.location.href

Syntax to Return Full URL –

You can use the following syntax to return the full URL

  • Return URL using location.href with window object.
window.location.href;
  • Return URL using location.href without window object.
location.href;

Example to Return Full URL –

<script>
// with window object
document.write(window.location.href);

// without window object
document.write(location.href);

</script>

 

Syntax to Set Full URL –

You can use one of the following syntaxes to set an URL

  • location.href property with window object
window.location.href="set-a-url";
  • location.href without window object
location.href="set-a-url";
  • window.location property instead of window.location.href
window.location="set-a-url";

Example to Set Full URL

In this example, I have use window.location.href syntax to redirect URL. Once you learn it, you will definitely know the implement property of other syntaxes.

<button onclick="setURL()">Click to Redirect URL</button>
<script>
var setURL= function(){
 window.location.href="https://codingstatus.com";
}

</script>

 

2. window.location.assign() Method

The window.location.assign() is a predefined method and It always loads a new document. Even It can navigate back to the current document.

If you want to load a new page and come back to the previous page using the browser back button then you will have to pass a page URL to the window.location.assign() method.

Syntax to Load New Document

You can use one of the following syntaxes –

  • location.assign method with window object
window.location.assign('pass-a-url');
  •  location.assign method without window object.
location.assign('pass-a-url');

Example to Load New Document

This example lets you load a new page on click a button.

<button onclick="setURL()">Click to Redirect URL</button>

<script> 
var setURL= function(){ 
    window.location.assign("https://codingstatus.com");
 }
 </script>

 

3. window.location.replace Method

The window.location.replace() is a predefined method and It replaces the current document with a new document. Even It removes the current document from the browser history. So, It can’t navigate back to the current document.

If you want to replace your current page with the new page and do not want to come back to the previous page using the browser back button then you will have to pass a page URL to window.location.replace()

Syntax to Replace Current Document –

You can use one of the following syntaxes –

  • location.replace method with window object
window.location.replace('pass-a-url');
  •  location.replace method without window object.
location.replace('pass-a-url');

Example to replace Current Document

This example lets you replace new document

<button onclick="setURL()">Click to Redirect URL</button>

 <script> 
var setURL= function(){ 
   window.location.replace("https://codingstatus.com");
 } 
</script>

4. window.location.reload() Method

The window.location.reload() is a predefined method and It reloads the current document. It is not similar to the reload button of the browser.

If you want to redirect back to the current page after implementing some functionality then you will have to pass a current page URL to the window.location.reload()

Syntax to Reload Current Document-

You can use one of the following syntaxes –

  • location.reload method with window object
window.location.reload('pass-a-url');
  •  location.reload method without window object.
location.reload('pass-a-url');

 

Example to Current Reload Document

This example lets you reload the current document

<button onclick="setURL()">Click to Redirect URL</button> 

<script> 
var setURL= function(){
    window.location.reload("https://codingstatus.com"); 
} 
</script>

JavaScript Redirect URL on loading Page

If you want to redirect the URL to a new page on the loading page then you will have to configure the following steps –

  • First of all, create an anonymous function and assign it to a new variable redirectURL.
  • Write the URL redirection code within the created anonymous function
  • Declare onload attribute in the <body> tag and assign redirectURL() function.
  • Load your page in the web browser and see the effect
<!DOCTYPE html>
<html>
<head>
  
</head>
<body onload="redirectURL()">

<script type="text/javascript">
  var redirectURL= function(e){
  window.location.href="https://codingstatus.com";
    
  }
</script>
</body>
</html>

 

JavaScript Redirect URL after 5 Seconds

If you want to redirect the URL to a new page by clicking a button after 5 seconds then you will have to configure the following points –

  • First, create an anonymous function and assign it to a new variable redirectURL.
  • Write the URL reduction code within the created anonymous function
  • Also, set the time delay for 5 seconds using setTimeout() method
  • Declare onclick attribute in the <button> tag and assign redirectURL() function.
  • Open your page in the web browser and see the effect
<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
<button onclick="redirectURL()">Click to Redirect URL</button>

<script type="text/javascript">
  var redirectURL= function(e){
  setTimeout('window.location.href="https://codingstatus.com";',5000);
    
  }
</script>
</body>
</html>

Tutorial Summary

Dear Developer, I hope that you have known how to Redirect URL using JavaScript. Now, you can easily implement it in your project. If you have any questions, you can ask me through the below comment box