Page Re-direction in JavaScript

Introduction

 
In this chapter, we learned why we use cookies and how to use cookies in JavaScript.
 
In this chapter, we will learn about Page Re-direction in JavaScript with example programs.

Page Re-direction in JavaScript

 
Its name indicates the concept, page redirection means moving to another location or page using JavaScript at the client-side. Sometimes you are visiting a specific website but it goes to another page because it is internally redirected. If you visit the shopping website: Amazon, it will show the following image: 
 
Page Re direction in JavaScript
 
It will show you a pop-up message “Shopping from India? Looking for Amazon.in?” with the two options, the first “Stay on Amazon.com” and the second “Go to Amazon.in” and when you click on the second option the page will be redirected to Amazon.
 
There are multiple reasons to redirect from the original page as follows:
  1. One reason we just discussed in the previous example. The browser gets your location and asks for the change of the page and that button click event page is redirected.
     
  2. If you have created a new domain and you want to redirect all your visitors from the old to the new domain.
The following are the various page redirection methods, to redirect from one page to another in JavaScript.
 
These methods are used for redirecting to another page; just add this code to the head section:
  1. Using window.location.
     
    Example
    1. <script type="text/javascript">    
    2. <!--    
    3.    window.location="http://www.c-sharpcorner.com";    
    4.    //-->    
    5. </script>  
  2. Using window.location.href.
     
    Example
    1. <script type="text/javascript">    
    2. <!--    
    3.    window.location.href="http://www.c-sharpcorner.com";    
    4.    //-->    
    5. </script>   
  3. Using window.location.assign.
     
    Example
    1. <script type="text/javascript">    
    2. <!--    
    3.    window.location.assign="http://www.c-sharpcorner.com";    
    4.    //-->    
    5. </script>  
  4. Using window.location.replace.
     
    Example
    1. <script type="text/javascript">    
    2. <!--    
    3.    window.location.replace="http://www.c-sharpcorner.com";    
    4.    //-->    
    5. </script>   
  5. Using window.open.
     
    Example
    1. <html>    
    2.    <head>    
    3.       <script type="text/javascript">    
    4.       <!--    
    5.          function WinOpen() {    
    6.             window.open( "http://www.c-sharpcorner.com/", "OpenWindow", "status = 1, height = 450, width = 450, resizable = 0" )    
    7.          }    
    8.          //-->    
    9.       </script>    
    10.    </head>    
    11.    <body>    
    12.       <input type="button" onClick="WinOpen()" value="WinOpen">    
    13.    </body>    
    14. </html>   
    In the preceding code you see the various properties are used, like height, width, status, resizable, fullscreen, left, right, and so on. The status, resizable and fullscreen is the ON/OFF properties that you can set to 0 for OFF and 1 for ON.
Output
 
When you click on the button it will open a new window like the following:
 
output
 

Redirect to another page after some time interval

 
For this, there is one method setTimeout() to set a time interval for redirecting. Just pass the redirected page and the time interval.
 
Example
  1. <html>    
  2.    <head>    
  3.       <script type="text/javascript">    
  4.          function Redirect()    
  5.          {    
  6.             window.location="http://www.c-sharpcorner.com";    
  7.          }    
  8.          document.write("You will be Redirected in 5s.");    
  9.          //set time interval and page to redirect    
  10.          setTimeout('Redirect()', 5000);    
  11.       </script>    
  12.    </head>    
  13.    <body>    
  14.    </body>    
  15. </html>   
Output
 
When you run the code it will show the output like the following. After 5 seconds it will redirect to the c-sharpcorner page.
 
You will be redirected in 5s.
 
Page redirected to another page OnClick event
 
Just call the method in the OnClick event. When you press the button it will redirect to another page.
 
Example
  1. <html>    
  2.    <head>    
  3.       <script type="text/javascript">    
  4.          function Redirect()    
  5.          {    
  6.              window.location="http://www.c-sharpcorner.com";    
  7.          }    
  8.       </script>    
  9.    </head>    
  10.    <body>    
  11.       <button onclick="Redirect()">Redirect Me</button>    
  12.    </body>    
  13. </html>   
Output
 
When you click on the Redirect Me button it will redirect to the www.c-sharpcorner.com page.
 
Redirected page
 

Summary

 
In this chapter, we learned about Page Redirection in JavaScript with example programs. 
Author
Jeetendra Gund
Jeetendra Gund
48 30.7k 3.1m