How to remove the hash from window.location (URL) with JavaScript without page refresh?
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.
function removeHash () {
history.pushState("", document.title, window.location.pathname
+ window.location.search);
}
Working demo: http://jsfiddle.net/AndyE/ycmPt/show/
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.
Note: if you want to replace the current page in the browser history, use replaceState()
instead of pushState()
.
Initial question:
window.location.href.substr(0, window.location.href.indexOf('#'))
or
window.location.href.split('#')[0]
both will return the URL without the hash or anything after it.
With regards to your edit:
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...
MOST UP-TO-DATE ANSWER
The right answer on how to do it without sacrificing (either full reload or leaving the hash sign there) is down here. Leaving this answer here though with respect to being the original one in 2009 whereas the correct one which leverages new browser APIs was given 1.5 years later.
(Too many answers are redundant and outdated.) The best solution now is this:
history.replaceState(null, null, ' ');
Simple and elegant:
history.replaceState({}, document.title, "."); // replace / with . to keep url