[英]How to force a page to reload if all what was changed in url is hash?
I am trying to reload current page with different url hash, but it doesn't work as expected. 我试图用不同的url哈希重新加载当前页面,但它不能按预期工作。
(Clarification how I want it to work: Reload the page and then scroll to the new hash.) (澄清我希望它如何工作:重新加载页面,然后滚动到新的哈希。)
Approach #1: 方法#1:
window.location.hash = "#" + newhash;
Only scrolls to this anchor without reloading the page. 仅滚动到此锚点而不重新加载页面。
Approach #2: 方法#2:
window.location.hash = "#" + newhash;
window.location.reload(true);
Kinda works but it first scrolls to the anchor, then reloads the page, then scrolls to the anchor again. 有点工作,但它首先滚动到锚点,然后重新加载页面,然后再次滚动到锚点。
Approach #3: 方法#3:
window.location.href = window.location.pathname + window.location.search + "&random=" + Math.round(Math.random()*100000) + "#" + newhash;
Works but I would rather not add random garbage to the url. 工作,但我宁愿不添加随机垃圾到网址。
Is there a better solution? 有更好的解决方案吗?
Remove the anchor you're going to navigate to, then use approach #2? 删除您要导航到的锚点,然后使用方法#2? Since there's no anchor, setting the hash shouldn't scroll the page.
由于没有锚点,因此设置哈希值不应滚动页面。
I had a JQuery function that fired on $(document).ready()
which detected if there was a hash appended to the URL in my case, so I kept that function the same and then just used a force reload whenever a hash change was detected: 我有一个在
$(document).ready()
上触发的JQuery函数,它检测到在我的情况下是否有一个附加到URL的哈希,所以我保持该函数相同,然后只是在哈希更改时使用强制重新加载检测:
$(window).on('hashchange',function(){
window.location.reload(true);
});
Then my other function - 然后我的其他功能 -
$(document).ready(function() {
var hash = window.location.hash;
if(hash) {
//DO STUFF I WANT TO DO WITH HASHES
}
});
In my case, it was fine for UX -- might not be good for others. 就我而言,用户体验很好 - 可能对其他人不利。
It should be expected that #foo will scroll to the anchor of the id, "foo". 应该期望#foo将滚动到id的锚点“foo”。 If you want to use approach #1 and have it reload, this approach might work.
如果您想使用方法#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)
});
}
Another option is to remove the hash and store it in session storage to be retrieved on reload: 另一种选择是删除哈希并将其存储在会话存储中以便在重新加载时检索:
var newUrl = location.href + '#myHash';
var splitUrl = newUrl.split('#');
newUrl = splitUrl[0];
if (splitUrl[1]){
sessionStorage.savedHash = splitUrl[1];
}
location.href = newUrl;
and then on top of your page you can have the following code: 然后在页面顶部,您可以拥有以下代码:
var savedHash = sessionStorage.savedHash;
if (savedHash){
delete sessionStorage.savedHash;
location.hash = savedHash;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.