web-dev-qa-db-ja.com

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にランダムなゴミを追加したくありません。

より良い解決策はありますか？

javascripturlhashlocationreload
39
serg

ナビゲートするアンカーを削除してから、アプローチ＃2を使用しますか？アンカーがないため、ハッシュを設定してもページはスクロールされません。

32
Nickolay

私の場合、URLにハッシュが追加されているかどうかを検出する$(document).ready()で起動するJQuery関数があったため、その関数をそのままにして、ハッシュの変更が検出されるたびに強制リロードを使用しました：

$(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には問題ありませんでした。他のユーザーには不向きかもしれません。

4
RCNeil

#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)
    });
}
2
Eli Grey

もう1つのオプションは、ハッシュを削除してセッションストレージに保存し、リロード時に取得することです。

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