recherche

Maison  >  Article  >  interface Web  >  Expliquez la redirection de page dans ES6 ?

Expliquez la redirection de page dans ES6 ?

WBOY
WBOYavant
2023-09-13 16:33:03721parcourir

解释一下 ES6 中的页面重定向？

Ce tutoriel présentera la redirection de page introduite dans la version ES6 de JavaScript. La redirection de page est une méthode permettant d'envoyer les visiteurs d'une page Web de l'URL actuelle vers une autre URL. Nous pouvons rediriger les utilisateurs vers une autre page du même site Web ou vers un autre site Web ou serveur.

En JavaScript, une fenêtre est un objet global qui contient un objet position. Nous pouvons utiliser différentes méthodes de l'objet location pour rediriger les pages dans ES6, c'est ce que nous apprendrons ensuite.

Utilisez la valeur de l'attribut href de l'objet window.location

L'objet location de l'objet global window contient l'attribut href. L'objet location contient toutes les informations sur l'emplacement de la page sur laquelle vous vous trouvez actuellement. L'attribut "href" de l'objet location contient l'URL actuelle.

Pour rediriger les visiteurs vers une URL différente, nous devons modifier l'URL actuelle dans le navigateur Web, ce qui peut être réalisé en modifiant la valeur de l'attribut href de l'objet de localisation.

Grammaire

Les utilisateurs peuvent rediriger les visiteurs vers une autre page en modifiant la valeur de l'attribut href en suivant la syntaxe suivante. 

window.location = "<new_URL>";
window.location.href = "<new_URL>";

Dans la syntaxe ci-dessus, si nous attribuons une nouvelle valeur URL à l'objet window.location, par défaut, la valeur de l'attribut href de l'objet location sera modifiée.

Exemple

Dans l'exemple ci-dessous, nous avons créé un bouton avec le texte « Redirection vers une autre page Web ». Lorsque l'utilisateur clique sur le bouton, nous appellerons la fonction redirect() de JavaScript.

Dans la fonction redirect(), nous modifions la valeur de l'attribut href de l'objet location, qui amènera le visiteur vers la nouvelle URL. 

<html>
<body>
   <h2>Using window.location.href attribute for page redirection</h2>
   <p>Click below button to redirect </p>
   <button id="redirect" onclick="redirect()">
   Redirect to the another webpage
   </button>
   <script type="text/javascript">
      function redirect(){
         window.location.href="https://tutorialspoint.com/"
      }
   </script>
</body>
</html>

Utilisez la méthode location.assign()

assign() est une méthode définie à l'intérieur de l'objet location. Nous pouvons charger un nouveau document dans la fenêtre du navigateur en utilisant la méthode location.assign(), recharger un nouveau document dans le navigateur signifie une redirection.

Grammaire

Utilisez la méthode allocate() pour rediriger selon la syntaxe ci-dessous. 

window.location.assign("<new_URL>");

Dans la syntaxe ci-dessus, nous appelons la méthode allocate() avec l'objet location comme référence.

Paramètres

  • New_URL - Il s'agit de l'URL vers laquelle nous souhaitons rediriger l'utilisateur.

Exemple

Dans cet exemple, nous utilisons la méthode allocate() de l'objet location pour charger une autre page Web dans la fenêtre actuelle du navigateur. 

<html>
<body>
   <p>Using the <i>window.location.assign()</i> method to redirect users to another webpage.</p>
   <button id="redirect" onclick="redirect()">Redirect </button>
   <script type="text/javascript">
      function redirect(){
         window.location.assign("https://www.tutorialspoint.com ");
      }
   </script>
</body>
</html>

Utilisez la méthode location.replace()

La méthode replace() de l'objet location fonctionne de la même manière que la méthode assign(). La seule différence entre les méthodes Replace() et allocate() est que la méthode replace() remplace l'URL actuelle par une nouvelle URL de la pile historique. Par conséquent, il ne permet pas à la pile historique de contenir des informations sur la page Web précédente, ce qui signifie que l'utilisateur ne peut pas revenir en arrière.

La méthode

assign() ajoute une nouvelle entrée à la pile historique. L'utilisateur peut donc revenir à la page précédente à l'aide du bouton Précédent du navigateur Web.

Grammaire

Les utilisateurs peuvent utiliser la méthode replace() pour rediriger la page selon la syntaxe suivante. 

Window.location.replace("<redirection_URL>")

Paramètres

  • Redirection_URL - L'URL de redirection est la nouvelle URL vers laquelle nous souhaitons rediriger les visiteurs vers notre page Web.

Exemple

Dans cet exemple, nous utilisons la méthode replace() de l'objet location pour rediriger l'utilisateur vers une nouvelle page Web. Dans la sortie, l'utilisateur peut essayer de revenir en arrière en cliquant sur le bouton Précédent après la redirection. La méthode Replace() n'est pas autorisée à revenir. 

<html>
<body>
   <p>Using the <i>window.location.replace()</i> method to redirect users to another webpage.</p>
   <button id="redirect" onclick="redirect()">Redirect </button>
   <script type="text/javascript">
      function redirect(){
         window.location.replace("https://www.tutorialspoint.com");
      }
   </script>
</body>
</html>

De plus, les utilisateurs peuvent également utiliser la méthode naviguer() de l'objet window pour la redirection. La méthode naviguer() est obsolète et n’est donc pas recommandée pour la redirection.

Nous avons appris 3 à 4 façons de rediriger les utilisateurs vers différentes pages Web. Les utilisateurs peuvent utiliser n'importe quelle méthode en fonction de leurs besoins. Par exemple, s’ils souhaitent remplacer l’URL actuelle, utilisez la méthode Replace() ; sinon, utilisez la méthode allocate(). Les utilisateurs peuvent utiliser la méthode reload() pour obtenir de nouvelles données du serveur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript es6 栈 堆 对象 location href
Déclaration：
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer
Article précédent：Comment obtenir la couleur actuelle du caractère au niveau du curseur dans IText à l'aide de FabricJS ?Article suivant：Comment obtenir la couleur actuelle du caractère au niveau du curseur dans IText à l'aide de FabricJS ?

Articles Liés

Voir plus