27 votes

Comment forcer une page à se recharger si tout ce qui a été changé dans l'url est du hash?

Je suis en train de recharger la page en cours avec différentes url de hachage, mais il ne fonctionne pas comme prévu.

(Clarification de la façon dont je veux que cela fonctionne: recharge la page, puis faites défiler jusqu'à la nouvelle table de hachage).

Approche n ° 1:

window.location.hash = "#" + newhash;

Seulement défile à cet ancrage sans recharger la page.

Approche n ° 2:

window.location.hash = "#" + newhash;
window.location.reload(true);

Plutôt des travaux mais il de la première passe à l'ancre, puis recharge la page, puis passe à l'ancre à nouveau.

Approche n ° 3:

window.location.href = window.location.pathname + window.location.search + "&random=" + Math.round(Math.random()*100000) + "#" + newhash;

Fonctionne, mais je préfère ne pas ajouter de l'aléatoire d'ordures à l'url.

Est-il une meilleure solution?

25voto

Nickolay Points 14384

Retirez l'ancre vers laquelle vous allez naviguer, puis utilisez l'approche n ° 2? Puisqu'il n'y a pas d'ancrage, la définition du hachage ne devrait pas faire défiler la page.

2voto

Eli Grey Points 17553

Il faut s'attendre à ce que #foo défile jusqu'à l'ancre de l'identifiant, "foo". Si vous souhaitez utiliser l'approche n ° 1 et la recharger, cette approche peut fonctionner.

 if (Object.defineProperty && Object.getOwnPropertyDescriptor) { // ES5
    var hashDescriptor = Object.getOwnPropertyDescriptor(location, "hash"),
    hashSetter = hashDescriptor.set;
    hashDescriptor.set = function (hash) {
        hashSetter.call(location, hash);
        location.reload(true);
    };
    Object.defineProperty(location, "hash", hashDescriptor);
} else if (location.__lookupSetter__ && location.__defineSetter__) { // JS
    var hashSetter = location.__lookupSetter__("hash");
    location.__defineSetter__("hash", function (hash) {
        hashSetter.call(location, hash);
        location.reload(true)
    });
}
 

1voto

RCNeil Points 1441

J'ai eu une fonction JQuery qui a tiré sur $(document).ready() qui a détecté s'il y avait un hachage ajouté à l'URL dans mon cas, j'ai donc gardé cette fonction la même et j'ai ensuite utilisé un rechargement forcé chaque fois qu'un changement de hachage était détecté :

 $(window).on('hashchange',function(){ 
    window.location.reload(true); 
});
 

Ensuite, mon autre fonction -

 $(document).ready(function() {
    var hash = window.location.hash;    
    if(hash) {
           //DO STUFF I WANT TO DO WITH HASHES
    }
});
 

Dans mon cas, c'était bien pour UX - peut-être pas bon pour les autres.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X