Comment modifier l'URL actuelle à l'aide de jQuery

Dans le développement Web, nous avons souvent besoin d'obtenir ou de modifier l'URL de la page actuelle via du code. jQuery est actuellement l'une des bibliothèques JavaScript les plus populaires et fournit des fonctions pratiques de manipulation d'URL. Cet article explique comment utiliser jQuery pour modifier l'URL actuelle.

1. Obtenir l'URL actuelle

Dans jQuery, nous pouvons utiliser l'objet window.location pour obtenir l'URL de la page actuelle. Cet objet possède de nombreuses propriétés utiles telles que href, protocole, hôte, chemin d'accès, recherche, hachage, etc. Voici un exemple :

console.log(window.location.href);

Après avoir exécuté ce code, la console affichera l'URL complète de la page actuelle.

2. Modifier l'URL actuelle

Si nous voulons modifier l'URL actuelle sans actualiser la page, nous pouvons utiliser la méthode pushState() ou replaceState(). Les deux méthodes sont définies dans l'objet History et peuvent être appelées à l'aide de l'objet window.history. La différence entre elles est que la méthode pushState() ajoute une nouvelle entrée à l'historique du navigateur, tandis que la méthode replaceState() remplace l'entrée actuelle par une nouvelle.

Ce qui suit est un exemple d'utilisation de la méthode pushState() :

window.history.pushState(null, null, '/new_url');

Cette méthode accepte trois paramètres :

1. state : l'objet d'état actuel. Il peut s'agir de n'importe quel type d'objet JavaScript, souvent utilisé pour stocker les données d'état actuel.
2. titre : Le titre de la nouvelle page. La plupart des navigateurs ignorent ce paramètre.
3. url : URL de la nouvelle page. Généralement défini sur chemin relatif ou chemin absolu.

Après avoir exécuté le code ci-dessus, l'URL de la page actuelle sera modifiée en /new_url, mais la page ne sera pas actualisée.

3. Écoutez les événements de modification d'URL

Lorsque vous utilisez la méthode pushState() ou replaceState() pour modifier l'URL, le navigateur n'actualisera pas automatiquement la page. Si l'utilisateur colle directement l'URL modifiée dans la barre d'adresse du navigateur, cela ne déclenchera pas d'actualisation de la page. Par conséquent, si nous voulons effectuer les opérations correspondantes lorsque l'URL change, nous devons écouter l'événement de changement d'URL.

Dans jQuery, vous pouvez utiliser la méthode on() pour écouter les événements de changement d'URL. Cette méthode accepte deux paramètres, le premier paramètre est le nom de l'événement et le deuxième paramètre est la fonction de gestion des événements. Nous pouvons écouter l'événement popstate, obtenir l'URL actuelle dans le gestionnaire d'événements, puis effectuer les opérations correspondantes.

Ce qui suit est un exemple de code pour écouter les événements de changement d'URL :

$(window).on('popstate', function() {
  console.log(window.location.href);
});

Après avoir exécuté le code ci-dessus, chaque fois que l'URL change, la console affichera la nouvelle URL.

Résumé

Cet article explique comment utiliser jQuery pour modifier l'URL actuelle. Nous pouvons utiliser l'objet window.location pour obtenir l'URL actuelle, utiliser la méthode pushState() ou replaceState() pour modifier l'URL et utiliser la méthode on() pour écouter les événements de changement d'URL. Ces méthodes peuvent nous aider à obtenir des effets interactifs riches et à améliorer l'expérience utilisateur.

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!