JavaScript - Page Redirection

 

What is Page Redirection ?

You might have encountered a situation where you clicked a URL to reach a page X but internally you were directed to another page Y. It happens due to page redirection. This concept is different from JavaScript Page Refresh.

There could be various reasons why you would like to redirect a user from the original page. We are listing down a few of the reasons −

How Page Re-direction Works ?

The implementations of Page-Redirection are as follows.

Example 1

It is quite simple to do a page redirect using JavaScript at client side. To redirect your site visitors to a new page, you just need to add a line in your head section as follows.

<html>
   <head>
      
      <script type="text/javascript">
         <!--
            function Redirect() {
               window.location="http://www.tutorialspoint.com";
            }
         //-->
      </script>
      
   </head>
   
   <body>
      <p>Click the following button, you will be redirected to home page.</p>
      
      <form>
         <input type="button" value="Redirect Me" onclick="Redirect();" />
      </form>
      
   </body>
</html>

Output

Example 2

You can show an appropriate message to your site visitors before redirecting them to a new page. This would need a bit time delay to load a new page. The following example shows how to implement the same. Here setTimeout() is a built-in JavaScript function which can be used to execute another function after a given time interval.

<html>
   <head>
   
      <script type="text/javascript">
         <!--
            function Redirect() {
               window.location="http://www.tutorialspoint.com";
            }
            
            document.write("You will be redirected to main page in 10 sec.");
            setTimeout('Redirect()', 10000);
         //-->
      </script>
      
   </head>
   
   <body>
   </body>
</html>

Output

You will be redirected to tutorialspoint.com main page in 10 seconds!

Example 3

The following example shows how to redirect your site visitors onto a different page based on their browsers.

<html>
   <head>
   
      <script type="text/javascript">
         <!--
            var browsername=navigator.appName;
            if( browsername == "Netscape" )
            {
               window.location="http://www.location.com/ns.htm";
            }
            else if ( browsername =="Microsoft Internet Explorer")
            {
               window.location="http://www.location.com/ie.htm";
            }
            else
            {
               window.location="http://www.location.com/other.htm";
            }
         //-->
      </script>
      
   </head>
   
   <body>
   </body>
</html>