5 Ways To Redirect a Web Page URL using JavaScript

Typically a URL redirection is done using server-side scripting using the browser's HTTP header. But there are many other ways as well, and using JavaScript is one of the commonly & safe ways to navigate from one URL to another. There are many scenarios where you might need to use JavaScript to redirect a page.

Let's first review the scenarios when you might need a JavaScript redirection and how you can do an HTTP URL redirection using JavaScript.

  1. Your website's domain name is changed.
  2. Your website URL structure is changed.
  3. Your website needs a redirection based on language or demographic location
  4. Website pages require authorization. The user session is expired, and the user needs to re-authorized the session.
  5. Form Submission – You want to redirect users to relative page after user submits a form.
  6. Redirect website from HTTP to HTTPS.
  7. Jump between pages upon user's actions.

 

There could be more specific scenarios where you might want to redirect a page. The reason for the redirection can be unique but will most likely fall in one of the above scenarios.

Let's check How to make a redirect using JavaScript.

JavaScript provides a 'Location' object with several functions in it. A Location object is a property of the browser's Window object globally available to access in the browser. These methods help retrieve and change the information of the URL displayed in the browser's address bar. You can access or create a Location object by assigning it to a JavaScript variable.

var urlCurrentLocationObject     = window.location;

Let's take a quick look at the basic structure of a URL to understand different parts of a URL and what a JavaScript location object define as object properties.

<protocol>//<hostname>:<port>/<pathname><search><hash>

//(A realtime Example)
https://www.mydomain.com:8080/myfolder/my-page-name.html#info1

Each of these properties returns a string from the URL

  1. Protocol – tells the browser's requested protocol (HTTP or HTTPS)
  2. Hostname – the hostname specifies the domain name & TLD extension.
  3. Port – Most of the website are hosted on port 80 (generally not visible), but you can select any available port to configure your server to serve the website under a particular port. For example, port 8080 in the example above.
  4. Pathname – pathname contains the full path of your URL where a physical HTML file is placed.
  5. Query – Query parameters is a string that follows the pathname and provide additional information.
  6. Hash – hash is an anchor part of the URL which comes after "#" sign.

 

Below are the four Location object methods:

  1. assign(): This sets a new URL for the Location object.
  2. reload(): This method is used to reload the page with the same URL
  3. replace(): This triggers a URL redirect with provided string or variable.
  4. search(): This method gives you the query string from the URL

 

You might have noticed here that the 'assign' & 'replace' methods look and work the same way. Let's take a look how they are different in nature.

How JavaScript' assign()' and 'replace()' methods are different than each other?

The main difference between a replace() method and an assign() method, is that the replace() method removes the URL of the current document from document history. This functionality forces the browser not to enable the "Back" button to navigate back to the original URL. So use the 'assign()' method when you want to keep the document history and let users navigate between the current and the prvious pages. Use the 'replace()' method when you want to remove the document history and load a new URL to the browser.

 

  1. Redirect to a new URL using JavaScript assign() method

 

var urlValue = http://www.newURL.com/page
window.location.assign(urlValue);

  1. Redirect to a new URL using JavaScript replace() method

 

  var urlValue = http://www.newURL.com/page
window.location.replace(urlValue);

 

 

  1. Redirect URL to HTTPS protocol using JavaScript href replace() method

if ( location . protocol !== "https:")
{
location .replace( window . location . href .replace("http:", "https:"));
}

  1. Reload or refresh a URL using JavaScript reload() method

 

window.location.reload();

// You can also assign a reload() method to a button
var reloadBtn = document .querySelector(".reloadBtn");
// bind button click event listener to reloadBtn
reloadBtn .addEventListener("click", function( e ){
e .preventDefault();
location .reload(true);
});

 

 

  1. Redirect URL using JavaScript on a Form Submission

 

var submitBtn = document .querySelector(". submitBtn ");
submitBtn .addEventListener("click", function ( evt ) {
evt .preventDefault();
var thankYouPageURL = “http://www.mydomain.com/thank-you-page” ;
window . location .replace( thankYouPageURL );
return false;
});

 

There are other browser functions that JavaScript can access and redirect users to a URL.

  1. Redirect URL using JavaScript history method

 

// go to previous page
window.history.back()

// go one page back
window.history.go(-1)
 

Summary

The browser’s window.location object has properties & methods are helpful that you can access globally using JavaScript. There are different scenarios when you might want to use JavaScript and create a redirect using window.location object. Try any of the above examples that suit best to your website environment.