Modifier l'URL en JavaScript sans recharger la page

Changer l'URL dynamiquement avec JavaScript

Lorsque vous travaillez avec des applications Web modernes, vous devrez peut-être modifier l'URL sans déclencher un rechargement de page. Cela peut être particulièrement utile pour créer une expérience utilisateur transparente.

Dans ce guide, nous explorerons les méthodes pour modifier la partie de l'URL après le domaine, y compris les techniques qui vous permettent d'accéder à la partie avant le symbole dièse (#). Cela garantit le respect des politiques inter-domaines tout en réalisant la modification d’URL souhaitée.

Explication détaillée de la modification d'URL en JavaScript

Le premier script utilise le history.pushState() méthode, qui fait partie de l’API History. Cette commande permet aux développeurs d'ajouter une nouvelle entrée à la pile de l'historique de session du navigateur, modifiant ainsi l'URL affichée dans la barre d'adresse sans recharger la page. Dans le scénario, const newURL = "/page2.php"; définit le nouveau chemin, et history.pushState(null, "", newURL); modifie l'URL vers ce nouveau chemin. En enveloppant le history.pushState commande dans une fonction comme function changeURL(newPath), nous pouvons mettre à jour dynamiquement l'URL si nécessaire. Cette technique est particulièrement utile pour les applications à page unique (SPA) où le contenu change dynamiquement sans recharger la page entière.

Le deuxième script concerne la modification du hachage de l'URL à l'aide de window.location.hash. Cette propriété obtient ou définit la partie d'ancrage de l'URL qui suit le symbole dièse (#). En définissant const hashValue = "newSection"; et window.location.hash = hashValue;, le hachage de l'URL devient #newSection sans recharger la page. Cette approche est utile pour naviguer dans la même page ou créer des liens vers des sections spécifiques d'un document. De plus, la fonction function updateHash(newHash) encapsule cette fonctionnalité, ce qui facilite la modification dynamique de la partie hachage de l'URL. Les deux scripts offrent des moyens transparents de modifier l'URL et d'améliorer l'expérience utilisateur en évitant les rechargements inutiles de page.

const newURL = "/page2.php";
history.pushState(null, "", newURL);
// This changes the URL to /page2.php without reloading the page

function changeURL(newPath) {
    window.history.pushState({}, "", newPath);
}
// Example usage
changeURL("/page2.php");

const hashValue = "newSection";
window.location.hash = hashValue;
// This changes the URL hash to #newSection

function updateHash(newHash) {
    window.location.hash = newHash;
}
// Example usage
updateHash("newSection");

Explorer des méthodes supplémentaires pour modifier l'URL sans recharger

Un autre aspect de la modification de l'URL sans recharger la page consiste à utiliser le replaceState() méthode de l’API History. Alors que dix ajoute une nouvelle entrée d'historique, replaceState() modifie l'entrée actuelle de l'historique. Cela peut être particulièrement utile lorsque vous souhaitez modifier l'URL sans encombrer l'historique de l'utilisateur avec plusieurs états. Par exemple, si vous disposez d'une application d'une seule page dont le contenu change fréquemment, vous souhaiterez peut-être mettre à jour l'URL pour refléter l'état actuel sans ajouter chaque modification à l'historique. Cela maintient la fonctionnalité du bouton de retour propre et conviviale.

Utiliser replaceState(), vous pouvez écrire une fonction similaire à changeURL() mais appelle plutôt history.replaceState() à l'intérieur. Par exemple, function replaceURL(newPath) pourrait utiliser history.replaceState(null, "", newPath); pour mettre à jour l'URL. Cette technique est utile pour améliorer l'expérience utilisateur en gardant l'URL synchronisée avec l'état de l'application sans créer d'entrées d'historique inutiles. De plus, il offre une manière plus efficace de gérer l'historique du navigateur, notamment dans les applications Web dynamiques.