web-dev-qa-db-fra.com

Comment forcer une page à recharger si tout ce qui a été changé dans l'URL est Hash?

J'essaie de recharger la page actuelle avec un hachage d'URL différent, mais cela ne fonctionne pas comme prévu.

(Clarification Comment je veux que cela fonctionne: rechargez la page, puis faites défiler jusqu'au nouveau hachage.)

approche n ° 1 :

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

Seulement fait défiler sur cette ancre sans recharger la page.

Approche n ° 2 :

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

Un peu travaille mais il fait d'abord défiler à l'ancre, puis recharge la page, puis fait défiler à nouveau à l'ancre.

Approche n ° 3 :

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

Travaille mais je préfère ajouter des ordures au hasard à l'URL.

Y a-t-il une meilleure solution?

javascripturlhashlocationreload
39
serg

Retirez l'ancre que vous allez accéder à, puis utilisez l'approche n ° 2? Comme il n'y a pas d'ancrage, le réglage du hachage ne devrait pas faire défiler la page.

32
Nickolay

J'ai eu une fonction jQuery qui a tiré sur $(document).ready() qui détectait s'il y avait un hachage ajouté à l'URL dans mon cas, j'ai donc gardé cette fonction identique, puis simplement utiliser une recharge de force chaque fois qu'un changement de hachage a été détecté. :

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

Alors 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 - pourrait ne pas être bon pour les autres.

4
RCNeil

On devrait s'attendre à ce que #OOO va faire défiler jusqu'à l'ancre de l'ID, "FOO". Si vous souhaitez utiliser l'approche n ° 1 et devez-la recharger, cette approche pourrait 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)
    });
}
2
Eli Grey

Une autre option consiste à supprimer le hachage et à le stocker dans le stockage de session à récupérer sur recharger:

var newUrl = location.href + '#myHash';
var splitUrl = newUrl.split('#');
newUrl = splitUrl[0];
if (splitUrl[1]){
    sessionStorage.savedHash = splitUrl[1];
}
location.href = newUrl;

et puis sur votre page, vous pouvez avoir le code suivant:

var savedHash = sessionStorage.savedHash;
if (savedHash){
    delete sessionStorage.savedHash;
    location.hash = savedHash;
}
0
yts