Comment rediriger vers une autre page Web à l'aide de JavaScript

JavaScript offre de nombreuses façons de rediriger l'utilisateur vers une autre page Web. Apprenez la méthode canonique et découvrez également toutes les options dont vous disposez, en utilisant du JavaScript brut

JavaScript offre de nombreuses façons de rediriger l'utilisateur vers une page Web différente, si pendant l'exécution de votre programme vous devez vous déplacer vers une autre page.

Celui qui peut être considéré comme canonique pour accéder à une nouvelle URL est

window.location = 'https://newurl.com'

Si vous souhaitez rediriger vers un chemin différent, sur le même domaine, utilisez:

window.location.pathname = '/new'

Ceci utilise lelocationobjet offert par leAPI historique.

Autres options de redirection

Comme pour la plupart des choses en programmation, il existe de nombreuses façons d'effectuer la même opération.

Puisquewindowest implicite dans le navigateur, vous pouvez également faire:

location = 'https://newurl.com'

Une autre méthode consiste à définir lehrefpropriété delocation:

window.location.href = 'https://newurl.com'

locationa également unassign()méthode qui accepte une URL et effectue la même chose:

window.location.assign('https://newurl.com')

Lereplace()est différente des méthodes précédentes car elle réécrit la page actuelle dans l'historique. La page actuelle est effacée. Par conséquent, lorsque vous cliquez sur le bouton "retour", vous revenez à la pageà présentest le dernier visité.

window.location.replace('https://newurl.com')

Cela peut être pratique dans certaines situations.

Différentes façons d'atteindre lewindowobjet

Le navigateur expose leselfettopobjets, qui font tous référence auxwindowobjet, vous pouvez donc les utiliser à la place dewindowdans tous les exemples ci-dessus:

self.location = 'https://newurl.com'

top.location = https://newurl.com

Redirection 301 à l'aide d'une directive côté serveur

Les exemples ci-dessus considèrent tous le cas d'une décision programmatique de passer à une page différente.

Si vous devez rediriger parce que l'URL actuelle est ancienne et déplacer une nouvelle URL, il est préférable d'utiliser la directive au niveau du serveur et de définir le code HTTP 301 pour signaler aux moteurs de recherche que l'URL actuelle a été déplacée de manière permanente vers la nouvelle ressource.

Cela peut être fait via.htaccesssi vous utilisez Apache.Netlifyfait cela à travers un_redirectsdéposer.

Les redirections 301 sont-elles possibles avec JavaScript?

Malheureusement non.

Ce n'est pas possible du côté client.

Le code de réponse HTTP 301 doit être envoyé depuis le serveur, bien avant que le JavaScript ne soit exécuté par le navigateur.

Les expériences indiquent que les redirections JavaScript sont interprétées par les moteurs de recherche comme des redirections 301. Voircet article de Search Engine Landpour référence.

Google dit:

Utiliser JavaScript pour rediriger les utilisateurs peut être une pratique légitime. Par exemple, si vous redirigez les utilisateurs vers une page interne une fois qu'ils sont connectés, vous pouvez utiliser JavaScript pour le faire. Lorsque vous examinez JavaScript ou d'autres méthodes de redirection pour vous assurer que votre site respecte nos consignes, tenez compte de l'intention. Gardez à l'esprit que les redirections 301 sont les meilleures lors du déplacement de votre site, mais vous pouvez utiliser une redirection JavaScript à cette fin si vous n'avez pas accès au serveur de votre site Web.

Utilisez une balise Meta HTML

Une autre option consiste à utiliser une balise Meta dans votre HTML:

<html>
  <head>
    <meta http-equiv="refresh" content="0;URL=https://newurl.com/">
  </head>
</html>

Cela amènera le navigateur à charger la nouvelle page une fois qu'il aura chargé et interprété la page actuelle, et ne signalera rien aux moteurs de recherche. La meilleure option est toujours d'utiliser une redirection 301 au niveau du serveur.

Téléchargez mon gratuitManuel du débutant JavaScript


Plus de tutoriels js: