Remove hash from url

JavascriptAjaxFragment Identifier

Javascript Problem Overview


I am ajax-ifying the pagination in one of me projects and since I want the users to be able to bookmarks the current page, I am appending the page number via hash, say:

onclick="callPage(2); window.location.hash='p=2'; return false;"

and thats on the hyperlink it works fine and everything, except, when the page number is 1, i dont want to URL to be /products#p=1, I just want it to be /products

I tried these variations:

  1. window.location.hash='' works but the url is now like /products# and I dont quite the hash there.
  2. not using window.location.hash at all, but when the user comes back to page 1 from, say page 3, he is in page one, but url is still /products#p=3 since I am not messing with the hash.
  3. Google search on this led me to several minutes (about 15) of silly forums where the question was asked right, but answers were suggesting that the page jumps because the thread creator had a hash in href like <a href="#"> and he should use javascript:void(0) instead. (had they never heard of Ajax?)

So finally, I decided to make this thread, I found several similar threads here, but all the answers ls very similar to my second point.

so my big question still remains a question: How to kick the hash out of the URL and possibly out of the universe? (only for the first page!)

Javascript Solutions


Solution 1 - Javascript

history.pushState("", document.title, window.location.pathname);

Solution 2 - Javascript

Updated Answer:

Best way to achieve this is to follow Homero Barbosa's answer below:

history.pushState("", document.title, window.location.pathname);

... or, if you want to maintain the search parameters:

history.pushState("", document.title, window.location.pathname + window.location.search);

Original Answer, do not use this, badwrongfun:

var loc = window.location.href,
    index = loc.indexOf('#');

if (index > 0) {
  window.location = loc.substring(0, index);
}

... but that refreshes the page for you which seems a trifle rude after just arriving there. Grin and bear it seems to be the best option.

Solution 3 - Javascript

Worked For me Perfectly

$(window).on('hashchange', function(e){
  window.history.pushState("", document.title, window.location.pathname);  
 // do something...
});

Solution 4 - Javascript

var urlWithoutHash = document.location.href.replace(location.hash , "" );

Solution 5 - Javascript

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestioniamseriousView Question on Stackoverflow
Solution 1 - JavascriptHoBaView Answer on Stackoverflow
Solution 2 - JavascriptwombletonView Answer on Stackoverflow
Solution 3 - JavascriptRonak BokariaView Answer on Stackoverflow
Solution 4 - JavascriptDevang BhagdevView Answer on Stackoverflow
Solution 5 - JavascriptMudassar aliView Answer on Stackoverflow