web-dev-qa-db-fra.com

Supprimer le fragment dans l'URL avec JavaScript sans provoquer de rechargement de page

Background: J'ai une page HTML qui vous permet de développer certains contenus. Etant donné que seules de petites parties de la page doivent être chargées pour une telle expansion, le processus est effectué via JavaScript et non pas vers une nouvelle page URL/HTML. Cependant, en tant que bonus, l’utilisateur est en mesure de créer un lien permanent avec de telles sections étendues, c’est-à-dire qu’il envoie à une autre personne une URL de type

http://example.com/#foobar

et que la catégorie "foobar" soit immédiatement ouverte 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 le fragment d'URL à nouveau, c'est-à-dire tourner http://example.com/#foobar dans http://example.com/ pour mettre à jour l’affichage permalien. Cependant, utiliser parent.location.hash = '' provoque un rechargement de la page entière (dans Firefox 3, par exemple), ce que j'aimerais éviter. L'utilisation de window.location.href = '/#' ne déclenchera pas de rechargement de page, mais laissera le signe "#" quelque peu désordonné dans l'URL. Donc, y a-t-il un moyen dans les navigateurs populaires de supprimer JavaScript une ancre d'URL incluant le signe "#" sans déclencher l'actualisation de la page?

javascripthtmlurlfragment-identifier
40
Philipp Lenssen

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));
}
46
Matmas

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

14
Diodeus - James MacFarlane

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

7
roenving

Vous pouvez utiliser les nouvelles nouvelles méthodes HTML5 window.history.pushState et replaceState, décrites dans ASCIIcasts 246: AJAX History State et sur le blog GitHub . Cela vous permet de modifier le chemin d'accès complet (au sein du même hôte d'origine) et pas seulement le fragment. Pour essayer cette fonctionnalité, naviguez dans un référentiel GitHub avec un navigateur récent.

4
Chris Boyle

Il y a aussi une autre option au lieu d'utiliser hash, Vous pouvez utiliser javascript: void(0); Exemple: <a href="javascript:void(0);" class="open_div">Open Div</a>

J'imagine que cela dépend également du moment où vous avez besoin de ce type de lien. Vous devez donc vérifier 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 consulter le débat sur ce qui est préférable ici: Quelle valeur "href" dois-je utiliser pour les liens JavaScript, "#" ou "javascript: void (0)"?

1
jazkat

Mettez ce code sur la tête.

<script type="text/javascript">
    var uri = window.location.toString();
    if (uri.indexOf("?") > 0) {
        var clean_uri = uri.substring(0, uri.indexOf("?"));
        window.history.replaceState({}, document.title, clean_uri);
    }
</script>
0
Manigandan Raamanathan

Donc utiliser 

parent.location.hash = '' premier

alors fais

window.location.href=window.location.href.slice(0, -1);
0
brando