fbpx
April 6, 2020
javascript page redirect

JAVASCRIPT PAGE REDIRECT | Redirect Web Pages Using JavaScript

In this tutorial we will be discussing about JavaScript page redirect which entails how to redirect web pages using JavaScript. In our previous tutorial we discussed about JavaScript cookies and we explained fully how you can create cookies using JavaScript. If you haven’t gone through this tutorial, you can do so using the link below

Read previous tutorial on: JavaScript Cookies | Learn How To Structure Cookies Using JavaScript

JAVASCRIPT PAGE REDIRECT

JavaScript page redirect simply involves redirecting a web page to another page. This can be achieved using a single line of JavaScript code embedded in a function. Virtually every event in JavaScript can be accomplished with the help of functions so you should get used to seeing and hearing about functions when dealing with JavaScript.

There are different reasons why you might want to redirect a web page and some of them include

  • You have a new website url and you want to redirect old users to the new website
  • Your website has different pages for different countries so you want to redirect the visitor to the right page
  • Your website has different pages for different browsers so you will like to redirect the visitor to the right page.

Simple page redirection

The below illustration shows how to redirect a page when a user clicks a button

<!DOCTYPE html>
<html lang="en">
<head>
   <script type="text/javascript">
      function pageRedirect(){
        window.location= "https://www.develoferd.com";
      }
   </script>
   
   <title>JAVASCRIPT PAGE REDIRECT</title>
</head>
<body>
   <form>
      <input   type="button"   value="click me" onclick="pageRedirect()">
   </form>
</body>
</html>

RESULT

JAVASCRIPT PAGE REDIRECT

REDIRECTING WITH TIMING

we can also structure a page to redirect after a setting amount of time with the help of an inbuilt function know as setTimeout(). This function can be used to call another function after a specific period of time. Example shown below

<!DOCTYPE html>
<html lang="en">
<head>
   <script type="text/javascript">
      function pageRedirect(){
        window.location= "https://www.develoferd.com";
      }
      setTimeout(() => { pageRedirect()
         
      }, 3000);
   </script>
   
   <title>JAVASCRIPT PAGE REDIRECT</title>
</head>
<body>
   <div>This page will be redirected in 3 seconds. start counting!!!</div>
</body>
</html>

RESULT

This page will be redirected in 3 seconds. start counting!!!

REDIRECTING PAGE BASED ON BROWSER TYPE

<!DOCTYPE html>
<html lang="en">
<head>
   <script type="text/javascript">
   var browserName = navigator.appName;
      if(browserName=="Netscape"){
        window.location= "https://www.develoferd.com";
      }
      else{
         window.location= "https://www.develoferd.com/page";
      }
      
   </script>
   
   <title>JAVASCRIPT PAGE REDIRECT BASED ON BROWSER TYPE</title>
</head>
<body>
</body>
</html>

The above example shows how a web page will be redirected to a different page if visited using Netscape browser.

CONCLUSION

JavaScript page redirect are very useful to developers and should be implemented for the right purpose. We hope with the help of this tutorial you will be able to redirect web pages with the help of JavaScript codes.

NEXT TUTORIAL: JAVASCRIPT DIALOGUE BOX

Leave a Reply

Your email address will not be published. Required fields are marked *