¿Cómo forzar a una página a volver a cargar si todo lo que se cambió en la url es hash?

Question

Estoy tratando de volver a cargar la página actual con hash de URL diferente, pero no funciona como se esperaba.

(Aclaración cómo quiero que funcione:. Actualizar la página y luego desplazarse hasta el nuevo hash)

Enfoque # 1:

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

Sólo se desplaza a esta ancla sin recargar la página.

Enfoque # 2:

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

Un poco pero funciona primeros se desplaza hasta el ancla, a continuación, vuelve a cargar la página, a continuación, se desplaza al ancla de nuevo.

Enfoque # 3:

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

funciona, pero prefiero no añadir basura aleatoria a la URL.

¿Existe una solución mejor?

Answer 1

Quite el ancla que va a navegar, luego use el acercamiento # 2? Como no hay anclaje, la configuración del hash no debe desplazarse por la página.

Answer 2

Se debe esperar que #foo se desplace hacia el ancla del id, "foo". Si desea utilizar el enfoque n. ° 1 y hacer que vuelva a cargar, este enfoque podría funcionar.

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

que tenían una función jQuery que disparó contra $(document).ready() el cual detecta si había un hash adjunto a la dirección URL en mi caso, por lo que mantienen que la función de la misma y luego sólo se utiliza una recarga vigor siempre que un cambio de hash era detectado:

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

Entonces mi otra función -

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

En mi caso, que estaba bien para UX - podría no ser bueno para otros.

Answer 4

Otra opción es eliminar el hash y almacenarlo en el almacenamiento de sesión para ser recuperado en recarga:

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

y luego en la parte superior de la página se puede tener el siguiente código:

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