Remove hash (#) & value from the URL using javascript?

Question

I'm firing a custom modal popup using the url #value on page load, and I want to clear the value if user closes the modal. I know I can remove the #value using location.hash = ''. But this will leave the #.

Is there a cross browser way to remove the #value along with the # in the below url?

e.g. http://www.myweb.com/list.html#value

Thanks in advance !

I understand that for stylistic purposes you might not want it there, but many websites have that (even large sites). It isn't a problem if it is still there and probably not worth it to remove. On the other hand, if it is not a page with POST values, you can just forward to the same page without anything after the #, using JavaScript, and you have now removed it — Zachary Weixelbaum, Sep 04 '16 at 04:16
See the correct answer for your situation here http://stackoverflow.com/a/5298684 — Pabel de Jesus Nuñez Landestoy, Sep 04 '16 at 04:18
@developerbh: No it's not a custom modal. It's a custom one. — Jerad Rutnam, Sep 04 '16 at 04:48
@ZacharyWeixelbaum: Yes it's not a blocker. But it's just to keep the url clean. And it's not a POST value. Just a JS function. If I redirect the page it will refresh the page right? Don't want to do that. :) — Jerad Rutnam, Sep 04 '16 at 04:51
@PabeldeJesusNuñezLandestoy: So there is no direct way of doing it rather than using 'history.pushState()` right. As Zachary asked have to see if it worth doing it then. Thanks though! :) — Jerad Rutnam, Sep 04 '16 at 04:55
@PabeldeJesusNuñezLandestoy: Thanks for the share. That is the best solution. I missed that post. :) — Jerad Rutnam, Sep 04 '16 at 05:10

score 1 · Accepted Answer · edited May 23 '17 at 10:29

There is no direct way of doing it.

As for the Answer shared by Pabel de Jesus Nuñez Landestoy on the top. Current workaround for this is writing a small function,

function removeHash () { 
    var scrollV, scrollH, loc = window.location;
    if ("pushState" in history)
        history.pushState("", document.title, loc.pathname + loc.search);
    else {
        // Prevent scrolling by storing the page's current scroll offset
        scrollV = document.body.scrollTop;
        scrollH = document.body.scrollLeft;

        loc.hash = "";

        // Restore the scroll offset, should be flicker free
        document.body.scrollTop = scrollV;
        document.body.scrollLeft = scrollH;
    }
}

Original answer is by: Andy E

Remove hash (#) & value from the URL using javascript?

1 Answers1