Как заставить страницу перезагрузиться, если все, что было изменено в url, является хэшем?
Я пытаюсь перезагрузить текущую страницу с другим хэшем url, но он не работает так, как ожидалось.
(уточнение, как я хочу, чтобы он работал: перезагрузите страницу, а затем перейдите к новому хэшу.)
подход #1:
window.location.hash = "#" + newhash;
только прокручивает этот якорь без перезагрузки страницы.
подход #2:
window.location.hash = "#" + newhash;
window.location.reload(true);
работает, но сначала прокручивается до якоря, затем перезагружает страницу, затем прокручивается до снова якорь.
подход #3:
window.location.href = window.location.pathname + window.location.search + "&random=" + Math.round(Math.random()*100000) + "#" + newhash;
работает, но я бы предпочел не добавлять случайный мусор в url.
есть ли лучшее решение?
4 ответов
удалите якорь, к которому вы собираетесь перейти, а затем используйте подход № 2? Поскольку нет якоря, установка хэша не должна прокручивать страницу.
у меня была функция JQuery, которая срабатывала на $(document).ready()
который обнаружил, есть ли хэш, добавленный к URL-адресу в моем случае, поэтому я сохранил эту функцию такой же, а затем просто использовал принудительную перезагрузку всякий раз, когда было обнаружено изменение хэша:
$(window).on('hashchange',function(){
window.location.reload(true);
});
тогда моя другая функция -
$(document).ready(function() {
var hash = window.location.hash;
if(hash) {
//DO STUFF I WANT TO DO WITH HASHES
}
});
в моем случае это было хорошо для UX - может быть, не хорошо для других.
следует ожидать, что #foo будет прокручиваться до якоря идентификатора "foo". Если вы хотите использовать подход #1 и перезагрузить его, такой подход может сработать.
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)
});
}
другой вариант-удалить хэш и сохранить его в хранилище сеансов, которое будет извлечено при перезагрузке:
var newUrl = location.href + '#myHash';
var splitUrl = newUrl.split('#');
newUrl = splitUrl[0];
if (splitUrl[1]){
sessionStorage.savedHash = splitUrl[1];
}
location.href = newUrl;
и затем в верхней части вашей страницы вы можете иметь следующий код:
var savedHash = sessionStorage.savedHash;
if (savedHash){
delete sessionStorage.savedHash;
location.hash = savedHash;
}