Wie erzwinge eine Seite neu zu laden, wenn alles, was in URL geändert wurde, Hash ist?

Question

Ich versuche, aktuelle Seite mit anderen URL-Hash zu laden, aber es funktioniert nicht wie erwartet.

(Klärung, wie ich will es an die Arbeit. Aktualisieren Sie die Seite und dann auf den neuen Hash scrollen)

Ansatz # 1:

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

Nur Rollen zu diesem Anker ohne das Nachladen Seite.

Ansatz # 2:

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

Kinda funktioniert, aber es erste Rollen auf den Anker, neu lädt dann die Seite, dann rollt wieder auf den Anker.

Ansatz # 3:

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

Werke aber ich würde lieber nicht zufällig Müll auf die URL hinzuzufügen.

Gibt es eine bessere Lösung?

Answer 1

Entfernen Sie den Anker, zu dem Sie navigieren möchten, und verwenden Sie dann Approach # 2? Da kein Anker vorhanden ist, sollte beim Festlegen des Hash-Werts nicht auf der Seite geblättert werden.

Answer 2

Es sollte erwartet werden, dass #foo zum Anker der ID "foo" scrollt. Wenn Sie Ansatz 1 verwenden und neu laden möchten, funktioniert dieser Ansatz möglicherweise.

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

Ich hatte eine JQuery-Funktion, die auf $(document).ready() gezündet, der, wenn es detektiert ein Hash an die URL in meinem Fall angehängt war, so hielt ich diese Funktion gleich und dann verwendet, nur eine Kraft neu laden, wenn ein Hash-Änderung war festgestellt:

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

Dann meine andere Funktion - war

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

In meinem Fall ist es für UX in Ordnung - für andere nicht gut sein könnte.

Answer 4

Eine weitere Option ist der Hash-und speichern sie in Sitzungsspeicher zu entfernen, auf reload abgerufen werden:

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

und dann oben auf Ihrer Seite können Sie den folgenden Code haben:

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