Suppression du fragment dans l'URL avec JavaScript sans provoquer de rechargement de la page

Question

Le contexte : J'ai une page HTML qui permet de développer certains contenus. Comme seules de petites parties de la page doivent être chargées pour une telle expansion, cela se fait via JavaScript, et non en dirigeant vers une nouvelle URL/page HTML. Cependant, en prime, l'utilisateur peut établir un lien vers ces sections étendues, c'est-à-dire envoyer à quelqu'un d'autre une URL du type

http://example.com/#foobar

et faire en sorte que la catégorie "foobar" soit ouverte immédiatement pour cet autre utilisateur. Cela fonctionne en utilisant parent.location.hash = 'foobar', donc cette partie est correcte.

Maintenant la question : Lorsque l'utilisateur ferme une telle catégorie sur la page, je veux vider à nouveau le fragment d'URL, c'est-à-dire le transformer. http://example.com/#foobar en http://example.com/ pour mettre à jour l'affichage des permaliens. Cependant, en utilisant parent.location.hash = '' entraîne un rechargement de toute la page (dans Firefox 3, par exemple), ce que j'aimerais éviter. Utilisation de window.location.href = '/#' ne déclenche pas le rechargement de la page, mais laisse le signe "#" dans l'URL. Existe-t-il donc un moyen, dans les navigateurs les plus courants, de supprimer en JavaScript une ancre URL incluant le signe "#" sans déclencher un rafraîchissement de la page ?

Answer 1

Comme d'autres l'ont mentionné, replaceState en HTML5 peut être utilisé pour supprimer le fragment d'URL.

Voici un exemple :

// remove fragment as much as it can go without adding an entry in browser history:
window.location.replace("#");

// slice off the remaining '#' in HTML5:    
if (typeof window.history.replaceState == 'function') {
  history.replaceState({}, '', window.location.href.slice(0, -1));
}

Answer 2

Puisque vous contrôlez l'action sur la valeur de hachage, pourquoi ne pas utiliser un jeton qui ne signifie "rien", comme "#_" ou "#default".

Answer 3

Désolé de le dire, mais la réponse est non si vider location.hash n'accomplit pas la tâche !-)

Answer 4

Vous pourriez utiliser le tout nouveau HTML5 window.history.pushState y replaceState comme décrit dans ASCIIcasts 246 : État de l'historique AJAX y sur le blog de GitHub . Cela vous permet de modifier l'ensemble du chemin (au sein du même hôte d'origine) et pas seulement le fragment. Pour essayer cette fonctionnalité, naviguer dans un dépôt GitHub avec un navigateur récent.

Answer 5

Il existe également une autre option au lieu d'utiliser le hachage, vous pouvez utiliser javascript: void(0); Exemple : <a href="javascript:void(0);" class="open_div">Open Div</a>

Je suppose que cela dépend aussi du moment où vous avez besoin de ce type de lien, alors vous feriez mieux de consulter les liens suivants :

Comment l'utiliser : http://www.brightcherry.co.uk/scribbles/2010/04/25/javascript-how-to-remove-the-trailing-hash-in-a-url/ ou vérifier le débat sur ce qui est mieux ici : Href pour les liens Javascript : "#" ou "javascript:void(0)" ?