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

Question

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?

Answer 1

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.

Answer 2

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

Answer 3

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.