Comment puis-je modifier l'URL d'un navigateur sans recharger la page à l'aide de JavaScript ?

Modification de l'URL du navigateur sans recharger la page à l'aide de JavaScript

De nombreuses actions JavaScript affectent la page actuelle mais nécessitent une modification de l'URL pour référence ultérieure ou mise en signet. De plus, il existe un souhait de restaurer l'URL d'origine lors de l'utilisation du bouton « Retour ». Voici comment y parvenir :

Option 1 : Utilisation de l'identifiant de fragment (pour les anciens navigateurs)

Pour les navigateurs qui ne prennent pas en charge les nouveaux history.pushState et history.popState , il existe "l'ancienne" méthode : utiliser l'identifiant de fragment. Cette méthode ne nécessite pas de rechargement de la page.

En attribuant une valeur contenant les informations d'état souhaitées à la propriété window.location.hash, vous pouvez effectivement encoder l'état dans l'URL. Ensuite, vous devrez utiliser l'événement window.onhashchange ou, pour les navigateurs plus anciens, interroger périodiquement la valeur de hachage pour détecter les modifications. Initialisez le contenu de la page en fonction de la valeur de hachage lors du chargement de la page.

Option 2 : history.pushState et history.popState (navigateurs modernes)

Dans les navigateurs contemporains, le Les méthodes history.pushState et history.popState offrent une approche plus propre et plus robuste. history.pushState permet de mettre à jour l'URL sans recharger la page, tandis que history.popState gère la gestion du bouton "Retour". Cette méthode est prise en charge par tous les principaux navigateurs modernes.

Éviter les collisions d'identifiants

Lorsque vous travaillez avec des identifiants de fragments, soyez conscient des collisions potentielles avec les identifiants d'éléments sur la page. Le navigateur a tendance à faire défiler jusqu'à tout élément dont l'ID correspond à la valeur de hachage, ce qui peut entraîner un comportement inattendu.

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!