How do I redirect my web page with JavaScript?

Front End TechnologyJavascriptWeb Development

You may have run into a situation where you clicked a URL to go to a certain page but were directed to a different page internally. Page redirection is the cause of this. Redirecting occurs when an HTTP request for one page immediately navigates to another one. It differs from simply reloading a website. It is quite simple to do a web page redirection using vanilla JavaScript on the client side. So in this article, we will learn how to redirect web pages using vanilla JavaScript and when to use a particular method.

There are many ways to accomplish redirection of web pages using vanilla JavaScript but we will look at some of the most well-known, efficient, and typical JavaScript redirect methods in this article.

  • Using the replace() Method

  • Redirection using window.location.href

  • Using the window assign() Method

Using the replace() Method

The Location interface replace() method swaps out the current resource for the one at the given URL. The difference between the replace() method and assign() is that after using replace(), the current page won't be preserved in the session History, making it impossible for the user to return to it by pressing the back button.

Syntax

Users can follow the below syntax for the window.location.replace() method.

window.location.replace("url");
location.replace(“url”); // without using window object

Parameters

  • url − This parameter represents the webpage to which the user is redirected.

Example

The below example demonstrates the use of the window.location.replace() method in JavaScript for redirection of the web page.

We can also replace window.location.replace with just location.replace as there is no difference. Both of them have the same outcome (In the browser, where the window object is the global object). We can access global variables or functions using the window object's properties.

The script tag can be placed in either the head or the body section of your HTML, depending on when you want the JavaScript to load. In general, JavaScript code can be contained and kept apart from the main text of an HTML document by being inserted inside the document's head section.

<html>
<head>
   <title>Example- Redirecting web page with JavaScript</title>
</head>
<body>
   <h2>Redirecting web page with JavaScript</h2>
   <p>Click the following button, to get redirected Using the replace() function</p>
   <input type="button" value="Redirect Me" title="Redirect" onclick="Redirect()"/>
   <script>
      function Redirect() {
         window.location.replace("https://www.tutorialspoint.com");
      }
   </script>
</body>
</html>

After running the above code users can see how they were redirected to the home page of the tutorials point by using the replace() function but it won’t be possible to return to the original page using the back button.

Redirection using window.location.href

In this approach, we will use the most used JavaScript technique for redirecting URLs which is achieved by just altering the locations' href attribute. It is a property that will inform you of the browser's current URL position rather than a method. The page will reload if the property's value is changed.

You should remember that window.location.href does not always send the request to the server, it loads pages from the browser's cache. If you have an older version of page in your cache, it will redirect to that page instead of going to a new page from the server.

Syntax

window.location.href = "http://newURL.com";

Example

Users can learn to redirect their page with the below example.

<html>
<head>
   <title>Example- Redirecting web page with JavaScript</title>
</head>
<body>
   <h2>Redirecting web page with JavaScript</h2>
   <p>Click the following button, to get redirected Using the replace() function</p>
   <input type="button" value="Redirect Me" title="Redirect" onclick="Redirect()"/>
   <script>
      function Redirect() {
         window.location.replace("https://www.tutorialspoint.com");
      }
   </script>
</body>
</html>

After running the above code, users can observe how the page was loaded from the browser's cache and did not send the request to the server to load a fresh page by changing the href property. (provided that the older version of the page was available in the browser’s cache of the user)

Using the Window assign() Method

A web page can be redirected using JavaScript by using the window.location.assign() function. This procedure redirects to the newly added URL and adds it to the history stack.

Now the question arises whether to use the replace() method or the assign method. The actual difference between the two is that the replace() method removes the current document's URL from the document history, making it impossible to get back to the original document using the "back" button.

Therefore, if you want to load a new document and provide the user the option to go back to the original page from which he was redirected, use the assign() method.

Syntax

window.location.assign ( "url" );

Example

In the below example, we have used the window.location.assign() method to redirect to the home page of tutorials point

<html>
<head>
   <title>Example - Redirecting web page with JavaScript</title>
</head>
<body>
   <h2>Redirecting web page with JavaScript</h2>
   <p>Click the following button, to get redirected using the window assign() function.</p>
   <input type="button" value="Redirect Me" title="Redirect" onclick="Redirect()">
   <script>
      function Redirect() {
         window.location.assign("https://www.tutorialspoint.com");
      }
   </script>
</body>
</html>

After clicking on the button, users can see that the webpage was redirected and by pressing the back button they were able to return to the original page from where they had started unlike the replace() method where we were unable to use the back button to get to the previous page.

Conclusion

In this article, we have used the three most common and efficient ways to redirect the user to a different web page by using vanilla JavaScript. All of the methods work just fine but should be used according to the needs of the user. Some of the extra methods like window.navigate() were not covered in this article as they are exclusive to certain web browsers so, these methods may or may not function properly in other web browsers.

raja
Updated on 20-Jul-2022 08:52:26

Advertisements