Dans l’administration de sites web et le développement applicatif, la redirection d’un visiteur s’opère idéalement au niveau serveur via des en-têtes HTTP (codes 301 ou 302). Cependant, il arrive fréquemment que l’on doive orchestrer ce renvoi directement depuis le navigateur du client. C’est le cas lorsqu’un message informatif doit être affiché pendant quelques secondes, ou lorsque le traitement dépend d’une interaction en JavaScript sur la page.
Les mécanismes de redirection immédiate
Le moteur du navigateur offre plusieurs propriétés rattachées à l’objet window.location pour réassigner l’URL active.
window.location.href : la navigation standard
L’utilisation de la propriété href simule un clic utilisateur sur un lien hypertexte standard. La page de destination est ajoutée à l’historique du navigateur :
window.location.href = « /nouvelle-page.html »;
Cette approche permet au visiteur d’utiliser le bouton « Précédent » de son navigateur pour revenir en arrière, même s’il risque d’être immédiatement renvoyé vers la nouvelle cible si la page d’origine déclenche automatiquement le script au chargement.
window.location.replace() : éviter les boucles dans l’historique
Pour éviter l’écueil du retour arrière bloqué, la fonction replace() est souvent plus pertinente. Elle substitue la ressource courante dans l’historique de session :
window.location.replace(« /nouvelle-page.html »);
L’utilisateur ne se retrouve pas coincé dans une boucle infinie de redirection s’il tente de reculer dans ses onglets.
Ajouter un délai d’attente avec setTimeout
Il est courant d’avertir le visiteur par un message (« Vous allez être redirigé dans un instant… ») avant le changement d’URL. L’exécution de la redirection doit alors être différée avec la fonction JavaScript setTimeout.
Syntaxe moderne et propre
Les anciennes pratiques consistaient à passer une chaîne de caractères évaluée par le moteur ou à insérer des gestionnaires d’événements directement dans les balises HTML. Il est recommandé de séparer le code de la structure et d’utiliser une fonction de rappel explicite :
document.addEventListener(« DOMContentLoaded », () => {
const delaiMs = 3000;
setTimeout(() => {
window.location.href = « /index.php »;
}, delaiMs);
});
L’événement DOMContentLoaded garantit que l’arbre HTML est complètement analysé avant de lancer le compte à rebours, ce qui évite de ralentir le rendu visuel de la page.
Pourquoi recourir au JavaScript plutôt qu’au serveur ?
Sur un serveur web, les redirections HTTP restent la référence pour la performance et le référencement. Néanmoins, la solution JavaScript s’avère indispensable dans plusieurs cas :
- Erreurs d’en-têtes HTTP envoyés : Lorsqu’un script commence à écrire du contenu dans le flux de sortie avant une redirection PHP, le serveur déclenche l’inévitable PHP Warning: Cannot modify header information – headers already sent by (output. Bien qu’il faille corriger la structure du code, un script client permet parfois d’assurer la continuité d’un service legacy en attendant un correctif.
- Dysfonctionnements d’inclusion de scripts : Des bugs de chargement, comme une erreur include sur serveur php OVH, peuvent altérer l’enchaînement de requêtes côté serveur, nécessitant une page d’attente côté client.
- Applications monopages (SPA) : Le routage y est entièrement pris en charge par le navigateur sans recharger le serveur à chaque changement de vue.
Bonnes pratiques d’accessibilité et fallback
Une redirection JavaScript ne doit jamais laisser un utilisateur bloqué si ses scripts sont désactivés ou bloqués par une extension de sécurité. Pensez systématiquement à intégrer une alternative explicite :
- Un lien direct cliquable invitant l’internaute à poursuivre manuellement.
- Une balise <noscript> contenant une balise meta http-equiv= »refresh » pour garantir que même les clients sans JavaScript atteignent leur destination.
