JavaScript - Redirection de page

Qu'est-ce que la redirection de page?

Vous avez peut-être rencontré une situation où vous avez cliqué sur une URL pour accéder à une page X, mais en interne, vous avez été dirigé vers une autre page Y. Cela se produit en raison de page redirection. Ce concept est différent de l' actualisation de page JavaScript .

Il peut y avoir plusieurs raisons pour lesquelles vous souhaitez rediriger un utilisateur depuis la page d'origine. Nous énumérons quelques-unes des raisons -

  • Vous n'avez pas aimé le nom de votre domaine et vous en êtes à un nouveau. Dans un tel scénario, vous souhaiterez peut-être diriger tous vos visiteurs vers le nouveau site. Ici, vous pouvez conserver votre ancien domaine mais mettre une seule page avec une redirection de page afin que tous les visiteurs de votre ancien domaine puissent accéder à votre nouveau domaine.

  • Vous avez créé diverses pages en fonction des versions de navigateur ou de leurs noms ou peuvent être basées sur différents pays, puis au lieu d'utiliser la redirection de page côté serveur, vous pouvez utiliser la redirection de page côté client pour amener vos utilisateurs sur la page appropriée.

  • Les moteurs de recherche ont peut-être déjà indexé vos pages. Mais en passant à un autre domaine, vous n'aimeriez pas perdre vos visiteurs venant des moteurs de recherche. Vous pouvez donc utiliser la redirection de page côté client. Mais gardez à l'esprit que cela ne doit pas être fait pour tromper le moteur de recherche, cela pourrait conduire votre site à être banni.

Comment fonctionne la réorientation de page?

Les implémentations de la redirection de page sont les suivantes.

Exemple 1

Il est assez simple de faire une redirection de page en utilisant JavaScript côté client. Pour rediriger les visiteurs de votre site vers une nouvelle page, il vous suffit d'ajouter une ligne dans votre section de tête comme suit.

<html>
   <head>
      <script type = "text/javascript">
         <!--
            function Redirect() {
               window.location = "https://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>

Production

Exemple 2

Vous pouvez afficher un message approprié aux visiteurs de votre site avant de les rediriger vers une nouvelle page. Cela aurait besoin d'un peu de temps pour charger une nouvelle page. L'exemple suivant montre comment implémenter la même chose. IcisetTimeout() est une fonction JavaScript intégrée qui peut être utilisée pour exécuter une autre fonction après un intervalle de temps donné.

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

Production

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

Exemple 3

L'exemple suivant montre comment rediriger les visiteurs de votre site vers une page différente en fonction de leurs navigateurs.

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