如果 url 中更改的所有内容都是哈希值，如何强制页面重新加载？

Question

我正在尝试使用不同的 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;

有效，但我不想向网址中添加随机垃圾。

有更好的解决方案吗？

Answer 1

删除您要导航到的锚点，然后使用方法#2？由于没有锚点，设置哈希值不应滚动页面。

Answer 2

我有一个在 $(document).ready() 上触发的 JQuery 函数，它检测在我的情况下是否有附加到 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
    }
});

就我而言，它对用户体验很好 - 可能对其他人不利。

Answer 3

预计 #foo 将滚动到 id 的锚点“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)
    });
}

Answer 4

另一种选择是删除哈希值并将其存储在会话存储中，以便在重新加载时检索：

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;
}