Clearing URL hash

Question

Visit stackoverflow.com/#_=_ and window.location.hash evaluates to #_=_. Fine.

Now execute window.location.hash = '' to clear the hash, and the URL becomes stackoverflow.com/#. (Notice the trailing #.)

Why is the # in window.location.hash inconsistently included or excluded? How can the # be removed from the URL without reloading the page?

(MDN says

[the hash is] the part of the URL that follows the # symbol, including the # symbol.

but that is not true for in the case of an empty hash.)

Goren

With which browser did you observe this behavior? – Xanthene

visiting stackoverflow.com/# also results in window.location.hash === '' so it's consistent behavior. – Bertine

You are saying that manipulating hash with JavaScript leads to # in URL and empty hash property. Now visiting page with only # in URL also leads to empty hash property. hash property is filled only when there are other characters after # in URL and it is consistent behavior in all browsers. – Bertine

I seem to recall that IE does not include the '#' as part of the location.hash -- just to point out some other inconsistency... – Commendation

ie seems to add 'file///' at the beginning when adding a # at the end of a url – Morey

Possible duplicate of How to remove the hash from window.location (URL) with JavaScript without page refresh? – Robey

Answer 1

To answer the second question (removing the # without a page refresh):

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

Goren

Note: pushState is IE10 and above. – Kaneshakang

I prefer replaceState to achieve this. – Orangutan

Is there any solution for IE9? I tried window.location.href.replace( /#.*/, ""); but it reloads the page. – Spoken

Answer 2

Answering to your first question:

According to the window.location doc in Mozilla.org: "the part of the URL that follows the # symbol, if there is one, including the # symbol. Empty string if the url does not contain # or has nothing after the #."

Curiously, that document was just updated on 4/8/2013. Not sure if that was added after you checked the documentation.

By the way (and in reference to the answers), the window.location.hash and pushState are different concepts although close related.

Staircase

Answer 3

There are 2 things driving this behaviour:

• "Setting the hash property navigates to the named anchor without reloading the document." (here)
• "When you set the location object or any of its properties except hash[...]In JavaScript 1.1 and later, the effect of setting location depends on the user's setting for comparing a document to the original over the network." (here)

So basically, setting the hash property should never lead to a reload, setting any other property should lead to a reload (or perhaps an E-Tag/modified-since header check, depending on browser settings).

I would assume that for the sake of consistency, browser builders transform setting an empty hash, to setting '#' as hash. This way the url in the location bar does not lead to a reload. But this latter part is pure speculation.

Commendation