CODEWITHSUNDEEP
javascripthtmlurl-routingwindow.location
Randomblue
Randomblue

Reputation: 116313

Clearing URL hash

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

Upvotes: 30

Views: 28761

Answers (3)

Claude
Claude

Reputation: 9980

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.

Upvotes: 0

ricardohdz
ricardohdz

Reputation: 579

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.

Upvotes: 4

Randomblue
Randomblue

Reputation: 116313

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

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

Upvotes: 56

Related Questions