Rectangle 27 0

How about the following?

window.location.hash=' '

Please note that am setting the hash to a single space and not an empty string.

Setting the hash to an invalid anchor does not cause a refresh either. Such as,

window.location.hash='invalidtag'

But, I find above solution to be misleading. This seems to indicate that there is an anchor on the given position with the given name although there isn't one. At the same time, using an empty string causes page to move to the top which can be unacceptable at times. Using a space also ensures that whenever the URL is copied and bookmarked and visited again, the page will usually be at the top and the space will be ignored.

And, hey, this is my first answer on StackOverflow. Hope someone finds it useful and it matches the community standards.

fragment identifier - How to remove the hash from window.location with...

javascript fragment-identifier
Rectangle 27 0

You can replace hash with null

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

The question asks "without causing the page to refresh", but this method does refresh the page. You should note this fact in your answer, so we don't all have to waste our time finding out firsthand that you're answering a different question than the one we're actually trying to get answered here.

fragment identifier - How to remove the hash from window.location with...

javascript fragment-identifier
Rectangle 27 0

Solving this problem is much more within reach nowadays. The HTML5 History API allows us to manipulate the location bar to display any URL within the current domain.

This works in Chrome 9, Firefox 4, Safari 5, Opera 11.50 and in IE 10. For unsupported browsers, you could always write a gracefully degrading script that makes use of it where available:

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

So you can get rid of the hash symbol, just not in all browsers yet.

replaceState()
pushState()

Use this line to make sure you don't lose the query string: history.pushState("", document.title, window.location.pathname + window.location.search);

@Phil: thanks for pointing that out, I've updated the answer accordingly. I'm too used to using pretty URLs.

I suggest using replaceState instead of pushState, to not create an extra entry in the browser history.

fragment identifier - How to remove the hash from window.location with...

javascript fragment-identifier
Rectangle 27 0

window.history.back(1);

This trick is very useful when you just want create a link to previous page, but the link is hidden in bunch of js files.

fragment identifier - How to remove the hash from window.location with...

javascript fragment-identifier
Rectangle 27 0

window.location.href.substr(0, window.location.href.indexOf('#'))
window.location.href.split('#')[0]

both will return the URL without the hash or anything after it.

Any change to window.location will trigger a page refresh. You can change window.location.hash without triggering the refresh (though the window will jump if your hash matches an id on the page), but you can't get rid of the hash sign. Take your pick for which is worse...

This is just plain wrong, you can change window.location.hash and it will not trigger a refresh.

@Evgeny -- That's what my answer says. I explicitly say that changing window.location.hash won't trigger a refresh. "You can change window.location.hash without triggering the refresh (though the window will jump if your hash matches an id on the page)".

No page reload - that is in the question. This is not the answer as it requires/forces a page reload!

also think it should not be the answer

@abernier Agreed, doesn't say how do to remove the hash from the URL, just the URL string.

fragment identifier - How to remove the hash from window.location with...

javascript fragment-identifier
Rectangle 27 0

Simple and elegant:

history.replaceState({}, document.title, "/");

fragment identifier - How to remove the hash from window.location with...

javascript fragment-identifier
Rectangle 27 0

Simple and elegant:

history.replaceState({}, document.title, "/");

fragment identifier - How to remove the hash from window.location with...

javascript fragment-identifier
Rectangle 27 0

How about the following?

window.location.hash=' '

Please note that am setting the hash to a single space and not an empty string.

Setting the hash to an invalid anchor does not cause a refresh either. Such as,

window.location.hash='invalidtag'

But, I find above solution to be misleading. This seems to indicate that there is an anchor on the given position with the given name although there isn't one. At the same time, using an empty string causes page to move to the top which can be unacceptable at times. Using a space also ensures that whenever the URL is copied and bookmarked and visited again, the page will usually be at the top and the space will be ignored.

And, hey, this is my first answer on StackOverflow. Hope someone finds it useful and it matches the community standards.

fragment identifier - How to remove the hash from window.location with...

javascript fragment-identifier
Rectangle 27 0

window.location.href.substr(0, window.location.href.indexOf('#'))
window.location.href.split('#')[0]

both will return the URL without the hash or anything after it.

Any change to window.location will trigger a page refresh. You can change window.location.hash without triggering the refresh (though the window will jump if your hash matches an id on the page), but you can't get rid of the hash sign. Take your pick for which is worse...

This is just plain wrong, you can change window.location.hash and it will not trigger a refresh.

@Evgeny -- That's what my answer says. I explicitly say that changing window.location.hash won't trigger a refresh. "You can change window.location.hash without triggering the refresh (though the window will jump if your hash matches an id on the page)".

No page reload - that is in the question. This is not the answer as it requires/forces a page reload!

also think it should not be the answer

@abernier Agreed, doesn't say how do to remove the hash from the URL, just the URL string.

fragment identifier - How to remove the hash from window.location with...

javascript fragment-identifier
Rectangle 27 0

You can replace hash with null

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

The question asks "without causing the page to refresh", but this method does refresh the page. You should note this fact in your answer, so we don't all have to waste our time finding out firsthand that you're answering a different question than the one we're actually trying to get answered here.

fragment identifier - How to remove the hash from window.location with...

javascript fragment-identifier
Rectangle 27 0

Solving this problem is much more within reach nowadays. The HTML5 History API allows us to manipulate the location bar to display any URL within the current domain.

This works in Chrome 9, Firefox 4, Safari 5, Opera 11.50 and in IE 10. For unsupported browsers, you could always write a gracefully degrading script that makes use of it where available:

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

So you can get rid of the hash symbol, just not in all browsers yet.

replaceState()
pushState()

Use this line to make sure you don't lose the query string: history.pushState("", document.title, window.location.pathname + window.location.search);

@Phil: thanks for pointing that out, I've updated the answer accordingly. I'm too used to using pretty URLs.

I suggest using replaceState instead of pushState, to not create an extra entry in the browser history.

fragment identifier - How to remove the hash from window.location with...

javascript fragment-identifier
Rectangle 27 0

window.history.back(1);

This trick is very useful when you just want create a link to previous page, but the link is hidden in bunch of js files.

fragment identifier - How to remove the hash from window.location with...

javascript fragment-identifier
Rectangle 27 0

Solving this problem is much more within reach nowadays. The HTML5 History API allows us to manipulate the location bar to display any URL within the current domain.

This works in Chrome 9, Firefox 4, Safari 5, Opera 11.50 and in IE 10. For unsupported browsers, you could always write a gracefully degrading script that makes use of it where available:

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

So you can get rid of the hash symbol, just not in all browsers yet.

replaceState()
pushState()

Use this line to make sure you don't lose the query string: history.pushState("", document.title, window.location.pathname + window.location.search);

@Phil: thanks for pointing that out, I've updated the answer accordingly. I'm too used to using pretty URLs.

I suggest using replaceState instead of pushState, to not create an extra entry in the browser history.

fragment identifier - How to remove the hash from window.location with...

javascript fragment-identifier
Rectangle 27 0

window.history.back(1);

This trick is very useful when you just want create a link to previous page, but the link is hidden in bunch of js files.

fragment identifier - How to remove the hash from window.location with...

javascript fragment-identifier
Rectangle 27 0

Simple and elegant:

history.replaceState({}, document.title, "/");

fragment identifier - How to remove the hash from window.location with...

javascript fragment-identifier
Rectangle 27 0

How about the following?

window.location.hash=' '

Please note that am setting the hash to a single space and not an empty string.

Setting the hash to an invalid anchor does not cause a refresh either. Such as,

window.location.hash='invalidtag'

But, I find above solution to be misleading. This seems to indicate that there is an anchor on the given position with the given name although there isn't one. At the same time, using an empty string causes page to move to the top which can be unacceptable at times. Using a space also ensures that whenever the URL is copied and bookmarked and visited again, the page will usually be at the top and the space will be ignored.

And, hey, this is my first answer on StackOverflow. Hope someone finds it useful and it matches the community standards.

fragment identifier - How to remove the hash from window.location with...

javascript fragment-identifier
Rectangle 27 0

You can replace hash with null

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

The question asks "without causing the page to refresh", but this method does refresh the page. You should note this fact in your answer, so we don't all have to waste our time finding out firsthand that you're answering a different question than the one we're actually trying to get answered here.

fragment identifier - How to remove the hash from window.location with...

javascript fragment-identifier
Rectangle 27 0

window.location.href.substr(0, window.location.href.indexOf('#'))
window.location.href.split('#')[0]

both will return the URL without the hash or anything after it.

Any change to window.location will trigger a page refresh. You can change window.location.hash without triggering the refresh (though the window will jump if your hash matches an id on the page), but you can't get rid of the hash sign. Take your pick for which is worse...

This is just plain wrong, you can change window.location.hash and it will not trigger a refresh.

@Evgeny -- That's what my answer says. I explicitly say that changing window.location.hash won't trigger a refresh. "You can change window.location.hash without triggering the refresh (though the window will jump if your hash matches an id on the page)".

No page reload - that is in the question. This is not the answer as it requires/forces a page reload!

also think it should not be the answer

@abernier Agreed, doesn't say how do to remove the hash from the URL, just the URL string.

fragment identifier - How to remove the hash from window.location with...

javascript fragment-identifier