Redirection vers une page Web en JavaScript

  2. HowTo
  3. JavaScript Howtos
  4. Redirection vers une page Web en …
Nithin Krishnan 12 octobre 2023
JavaScript JavaScript Redirect
  1. JavaScript Rediriger une page Web avec location.href()
  2. JavaScript Rediriger une page Web avec location.replace()
  3. 3. JavaScript Rediriger une page Web avec location.assign()
  4. 4. JavaScript Redirige une page Web en créant dynamiquement un élément d’ancrage
  5. Conclusion
Redirection vers une page Web en JavaScript

Il existe différentes manières en JavaScript de réacheminer l’utilisateur. Cela dépend des besoins de l’entreprise sur le type de comportement de redirection que le site devrait avoir. Vous pouvez rediriger vos utilisateurs des manières suivantes:

  1. location.href()
  2. location.replace()
  3. location.assign()
  4. Créer un élément d’ancrage dynamiquement

JavaScript Rediriger une page Web avec location.href()

Utilisez l’interface location en conjonction avec les objets Document et Window pour la redirection. Typiquement, le window.location.href renvoie l’URL de la page courante. Par exemple, si vous exécutez le code suivant, vous verrez l’URL de la page:

console.log(window.location.href)

Production:

"https://www.delftstack.com/"

L’astuce consiste à remplacer cette URL en attribuant une URL différente à window.location.href. Cela obligera le navigateur à charger la page spécifiée par l’URL, donc à la rediriger. En termes de pile d’historique de site, cette méthode modifie l’URL de référence actuelle. Le code suivant vous dirigera vers la page de procédure de DelfStack.

window.location.href = 'https://www.delftstack.com/howto/';

Remarques:

  1. Une fois la nouvelle URL chargée, l’ancienne page Web est accessible par le bouton Précédent du navigateur.
  2. C’est la méthode la plus couramment utilisée pour la redirection

JavaScript Rediriger une page Web avec location.replace()

Si vous souhaitez vous déplacer de façon permanente vers une page Web, utilisez la fonction location.replace. La différence est que location.replace remplacera l’URL actuelle par une nouvelle URL. Par conséquent, l’utilisateur ne pourra pas revenir à l’URL précédente. En termes de pile d’historique du navigateur, la méthode affiche la dernière URL de la page Web et pousse l’URL dans la valeur.

window.location.replace('https://www.delftstack.com');

L’exécution de cette opération chargera le site https://www.delftstack.com.

Remarques:

  1. Nous vous recommandons d’utiliser cette méthode uniquement lorsque cela est nécessaire.
  2. On ne peut pas revenir au lien précédent en utilisant cette méthode. Par conséquent, ce n’est peut-être pas une bonne expérience utilisateur.

3. JavaScript Rediriger une page Web avec location.assign()

Comme la méthode location.replace(), la méthode assign() a la différence que le lien actuel reste dans l’historique du navigateur. Par conséquent, l’utilisateur pourra revenir à la page précédente en utilisant le bouton de retour du navigateur. Cette méthode prend également l’URL cible comme paramètre.

window.location.assign('https://www.delftstack.com');

4. JavaScript Redirige une page Web en créant dynamiquement un élément d’ancrage

Dans les navigateurs plus anciens, en particulier Internet Explorer, ayant la version 8 ou inférieure, l’interface de localisation n’est pas prise en charge. Par conséquent, nous créons dynamiquement une balise d’ancrage (<a>) et définissons l’attribut href avec l’URL cible. Comme mentionné précédemment, la balise d’ancrage est un élément passif qui nécessite une interaction de l’utilisateur pour l’invoquer. Ainsi, un événement de clic est déclenché dans le code pour faire fonctionner la redirection.

let targetURL = 'https://www.delftstack.com';
let newURL = document.createElement('a');
newURL.href = targetURL;
document.body.appendChild(newURL);
newURL.click();

Ici, nous réalisons la redirection en:

  1. Création d’un élément de balise d’ancrage document.createElement('a');
  2. Définition de la propriété href avec la nouvelle URL newURL.href = targetURL
  3. Attacher la balise créée dynamiquement au nœud DOM avec document.body.appendChild(newURL)
  4. Enfin, en l’invoquant en émulant un utilisateur cliquez sur newURL.click()

Le navigateur chargera la nouvelle URL.

Conclusion

En fonction des besoins de l’entreprise, il sera bon d’utiliser la méthode de mise à jour méta pour rediriger un utilisateur dès qu’il arrive sur la page Web du site en cours de maintenance. L’utilisation d’une balise d’ancrage est assez courante si la navigation est basée sur le clic de l’utilisateur. Nous pouvons utiliser les méthodes de l’interface Location en JavaScript, les window.location.href et window.location.assign(), pour envoyer par programmation un utilisateur vers une nouvelle URL.

Article connexe - JavaScript Redirect