qwanturank

Si vous créez ou gérez un site Web, il y a de fortes chances que vous deviez à un moment donné rediriger vos utilisateurs vers une nouvelle adresse. Par exemple, vous avez peut-être déménagé vers un nouveau domaine, acheté un deuxième ou déplacé une page existante vers une autre partie de votre site. Dans certains cas, cela se fait au niveau du serveur, avec des redirections HTTP via.htaccess ou Nginx. Les redirections côté serveur ont l’avantage d’utiliser les codes d’état HTTP 3xx. Ces codes d’état indiquent à l’agent utilisateur (comme les robots des moteurs de recherche) pourquoi la redirection a été configurée, ce qui peut être utile pour le référencement. Par exemple, une redirection HTTP 301 indique que la page en question a été déplacée définitivement vers un nouvel emplacement. En revanche, les redirections JavaScript sont côté client, ce qui signifie qu’elles indiquent au navigateur de récupérer le contenu à partir d’un emplacement différent. Vous pouvez utiliser une redirection côté client comme JavaScript si  :

  • Vous n’avez pas accès à la configuration de votre serveur ou au fichier.htaccess
  • Vous souhaitez lier la redirection à un événement ou à une action utilisateur spécifié
  • Vous effectuez un test A/B
  • Vous avez besoin de vérifications ou de validations supplémentaires avant de rediriger
  • Vous avez d’autres besoins qui ne peuvent pas être facilement traités en utilisant une redirection HTTP
  • Vous trouverez ci-dessous trois des manières les plus courantes de créer un lien de redirection en JavaScript à l’aide de l’objet de localisation, qui est une entité contenant des informations sur l’URL actuelle.

    Définir une nouvelle propriété window.location.href

    Le moyen le plus simple et le plus courant d’utiliser JavaScript pour rediriger vers une URL consiste à définir la propriété location sur une nouvelle URL à l’aide de window.location.href.Le code JavaScript ressemble à ceci  :window.location.href = ‘https://ExampleURL.com/’;À lui seul, window.location.href est une propriété qui vous indique quelle URL est actuellement affichée. En définissant une nouvelle valeur (un signe égal, suivi de votre nouvelle URL cible entre guillemets simples), vous indiquez au navigateur de charger cette nouvelle URL, de la même manière que ce qui se produirait si un utilisateur cliquait sur un lien. L’utilisation de « window.location.href » pour rediriger ajoute une nouvelle entrée à l’historique de la session en cours, ce qui signifie que si l’utilisateur clique sur son bouton « retour », il peut toujours revenir à la page d’origine. Cette méthode a tendance à être un peu plus rapide que l’appel d’une fonction, ce qui se produit dans les deux autres méthodes décrites ci-dessous. Cependant. Il a également tendance à être pris en charge par plus de navigateurs, par rapport à d’autres méthodes. (Une  » fonction  » est un bloc de code en JavaScript qui achève une tâche désignée. En règle générale, cette tâche implique de prendre une entrée et de renvoyer une sortie.)Conseil de pro .location.href », assurez-vous de ne pas configurer la redirection pour qu’elle s’exécute automatiquement, sinon l’utilisateur sera bloqué dans une boucle de redirection chaque fois qu’il essaiera de revenir à la page précédente. Au lieu de cela, envisagez de le lier à une action de l’utilisateur. Si vous ne voulez pas qu’ils puissent revenir en arrière, envisagez plutôt d’utiliser la fonction « window.location.replace ».

    Redirection à l’aide de la méthode location.assign()

    Du point de vue d’un utilisateur, une redirection utilisant « window.location.assign() » ressemble à la définition d’une nouvelle propriété href, comme dans l’exemple précédent. Ceci est dû au fait:

  • Ils créent tous deux une nouvelle entrée dans votre historique de session (similaire à un clic sur un lien)
  • Ils permettent tous deux aux utilisateurs de revenir en arrière et d’afficher la page précédente
  • Voici à quoi cela ressemble  :window.location.assign(‘https://www.ExampleURL.com/’);Malgré les similitudes, « location.assign() » est différent de « location.href » dans quelques points importants façons. Location.assign() appelle une fonction pour afficher le document situé à l’URL spécifiée. Selon votre navigateur, cela peut être plus lent que de simplement définir une nouvelle propriété href. Cela peut également être considéré comme une option plus sûre que la définition d’une nouvelle propriété href, car si le lien cible est rompu ou n’est pas sécurisé, la fonction lancera une exception DOMException. En JavaScript, une DOMException est un message d’erreur qui peut se produire lors de l’appel d’une fonction ou de l’accès à une propriété.Conseil de pro  : Si vous devez rediriger vers un domaine distinct à l’aide de location.assign(), vous devez utiliser HTTPS. Si vous ne le faites pas, votre redirection ne fonctionnera pas et lèvera à la place une exception pour une erreur de sécurité.

    Redirection à l’aide de la méthode location.replace()

    Comme « location.assign() », « window.location.replace() » appelle une fonction pour afficher un nouveau document situé à l’URL spécifiée. Cela ressemble à ceci  : window.location.replace(‘https://www.ExampleURL.com/’ ); Contrairement à la définition d’une nouvelle propriété d’emplacement ou à l’utilisation de  » location.assign() « , la méthode de remplacement ne crée pas de nouvelle entrée dans l’historique de vos sessions. Au lieu de cela, il remplace l’entrée actuelle, ce qui signifie que les utilisateurs ne peuvent pas cliquer sur le bouton de retour et revenir à la page précédente de pré-redirection. En tant que telle, cette méthode est idéale si vous souhaitez utiliser JavaScript pour empêcher les utilisateurs d’afficher la page à partir de laquelle vous les éloignez. Cette méthode a des forces et des faiblesses similaires à location.assign(), en ce sens qu’elle  :

  • Ne vous permet pas de rediriger vers des liens non sécurisés ou rompus, et lancera à la place une exception DOMException lorsque vous essayez d’en utiliser un
  • Peut être plus lent que la définition d’une nouvelle propriété window.location.href
  • Nécessite HTTPS si vous souhaitez rediriger vers un nouveau domaine
  • Conseil de pro  : Contrairement aux redirections HTTP, JavaScript ne dit pas aux robots d’exploration pourquoi la redirection a été mise en place. Ainsi, si votre page a été déplacée de façon permanente, vous pouvez envisager une redirection en utilisant.htaccess ou la configuration de votre serveur, si possible. Si vous implémentez des redirections sur votre site de quelque manière que ce soit, il est préférable d’auditer régulièrement votre site avec un outil tel que Site Audit. Bien que l’audit du site ne soit pas en mesure de rendre JavaScript, il peut identifier une variété de vérifications liées à la redirection, notamment  :

  • Rediriger les chaînes et les boucles
  • Redirection manquante ou canonique vers la page d’accueil HTTPS à partir de la version HTTP
  • Redirections temporaires ou permanentes (qui ne sont pas nécessairement un problème si elles sont utilisées correctement)
  • Les redirections de toutes sortes peuvent être utiles pour votre site, mais il est important de les mettre en œuvre correctement afin d’éviter les problèmes techniques de référencement. Si vous débutez ou souhaitez pratiquer JavaScript, vous pouvez visiter un site Web comme W3Schools, qui propose un « TryIt Editor » interactif pour JavaScript, HTML, CSS, et plus :

    Réflexions finales  : vérifiez toujours votre travail

    Utilisées efficacement, les redirections (JavaScript et autres) peuvent avoir un impact majeur sur l’expérience utilisateur sur votre site Web, guidant les utilisateurs vers le contenu le plus pertinent pour leurs besoins. Cependant, développer et maintenir un site Web est un processus compliqué et les erreurs peuvent être coûteuses. Si vous voulez que vos utilisateurs aient la meilleure expérience possible, il est crucial que vous vérifiiez votre travail de manière rigoureuse. L’audit de site peut faciliter ce processus en automatisant les vérifications de votre site, en identifiant les problèmes les plus critiques ayant une incidence sur les performances et l’expérience utilisateur de votre site, et en fournissant des conseils sur la façon de les résoudre.

    Comment rediriger une URL à l'aide de JavaScript

    S’abonner
    Notification pour
    guest
    0 Commentaires
    Commentaires en ligne
    Afficher tous les commentaires