How to force a page to reload if all what was changed in url is hash?

Question

I am trying to reload current page with different url hash, but it doesn't work as expected.

(Clarification how I want it to work: Reload the page and then scroll to the new hash.)

Approach #1:

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

Only scrolls to this anchor without reloading the page.

Approach #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:

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?

score 34 · Accepted Answer · answered Oct 19 '09 at 16:51

34

Remove the anchor you're going to navigate to, then use approach #2? Since there's no anchor, setting the hash shouldn't scroll the page.

answered Oct 19 '09 at 16:51

Nickolay

31,095
13
107
185

6

At first I didn't understand that you mean removing it from DOM. It works, thanks. – serg Oct 19 '09 at 17:07
3

If you want to keep the display more intact, just removing its `name` or `id` attribute should be enough for these purposes - the node itself can stay. – ecmanaut Oct 16 '12 at 01:10

score 6 · Answer 2 · answered Sep 02 '14 at 22:47

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:

$(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.

jQuery's ready event will not fire when `window.location = "#myHash"` is executed, which would be the point in this question, I believe. However, this code is useful for loading dynamic content, for instance, if the page is reloaded. — JoeBrockhaus, Dec 30 '14 at 19:03

score 2 · Answer 3 · answered Oct 19 '09 at 19:27

It should be expected that #foo will scroll to the anchor of the id, "foo". If you want to use approach #1 and have it reload, this approach might work.

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

I never tested it but it should work in every major browser (not counting IE <8) and if it doesn't it's most likely because IE won't allow redefining the descriptor of location.hash for "security reasons" though that's bull — Eli Grey, Oct 19 '09 at 20:48

score 0 · Answer 4 · answered Mar 16 '17 at 19:28

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

How to force a page to reload if all what was changed in url is hash?

4 Answers4

Linked