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

后端 未结 4 2149
没有蜡笔的小新
没有蜡笔的小新 2020-12-14 00:06

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 t

相关标签:
4条回答
  • 2020-12-14 00:20

    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.

    0 讨论(0)
  • 2020-12-14 00:27

    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.

    0 讨论(0)
  • 2020-12-14 00:34

    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)
        });
    }
    
    0 讨论(0)
  • 2020-12-14 00:43

    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;
    }
    
    0 讨论(0)
提交回复
热议问题