Maison > interface Web > js tutoriel > Comment puis-je supprimer le symbole de hachage d'une URL à l'aide de JavaScript sans recharger la page ?

Comment puis-je supprimer le symbole de hachage d'une URL à l'aide de JavaScript sans recharger la page ?

Susan Sarandon
Libérer: 2024-11-29 10:57:10
original
841 Les gens l'ont consulté

How Can I Remove the Hash Symbol from a URL Using JavaScript Without Reloading the Page?

Supprimer les symboles de hachage des URL avec JavaScript

Supprimer le symbole de hachage (#) d'une URL sans actualiser la page demande une touche plus de finesse que de simplement définir window.location.hash sur une chaîne vide.

Solution élégante pour les environnements modernes Navigateurs

L'API d'historique HTML5 moderne offre une solution élégante :

function removeHash() {
  history.pushState("", document.title, window.location.pathname + window.location.search);
}
Copier après la connexion

Exemple de démonstration :

https://jsfiddle. net/AndyE/ycmPt/

Navigateur plus large Prise en charge

Pour les navigateurs ne prenant pas en charge l'API d'historique, considérez ce script gracieusement dégradant :

function removeHash() {
  var scrollV = document.body.scrollTop;
  var scrollH = document.body.scrollLeft;
  var loc = window.location;

  if ("pushState" in history) {
    history.pushState("", document.title, loc.pathname + loc.search);
  } else {
    loc.hash = "";
    document.body.scrollTop = scrollV;
    document.body.scrollLeft = scrollH;
  }
}
Copier après la connexion

Mise en garde

Bien que cette solution puisse supprimer le symbole dièse, il convient de noter qu'il peut ne pas fonctionner dans tous les navigateurs, en particulier les plus anciens versions.

Remarque supplémentaire :

Pour remplacer la page actuelle dans l'historique du navigateur, utilisez replaceState() au lieu de pushState().

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal