Post
Ask Question

Page Re-direction in JavaScript: Day 6

Introduction

 
Before reading this article, I highly recommend reading the following previous parts:

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 like 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

 
I hope you understand the concept of Page Redirection in JavaScript. If you have any suggestion regarding this article then please contact me.


Similar Articles