Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to remove the hash from window.location (URL) with JavaScript without page refresh?

I have URL like: http://example.com#something, how do I remove #something, without causing the page to refresh?

I attempted the following solution:

window.location.hash = ''; 

However, this doesn't remove the hash symbol # from the URL.

like image 472
Tom Lehman Avatar asked Sep 09 '09 02:09

Tom Lehman


People also ask

How to remove hash from URL in JavaScript?

To remove the hash URL, you can use the replaceState method on the history API to remove the hash location. Example: HTML.

What does hash in URL mean?

In a URL, a hash mark, number sign, or pound sign ( # ) points a browser to a specific spot in a page or website. It is used to separate the URI of an object from a fragment identifier. When you use a URL with a # , it doesn't always go to the correct part of the page or website.

What does Window location replace do?

Window location. The replace() method replaces the current document with a new one.

What is window location href?

Window Location Href href property returns the URL of the current page.


2 Answers

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().

like image 78
Andy E Avatar answered Sep 28 '22 01:09

Andy E


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.

like image 21
Gabriel Hurley Avatar answered Sep 28 '22 02:09

Gabriel Hurley