window.location.hash - what is it, and its use cases?

2
votes

I have started to get into web development and I have come across document.location.hash. I know what a hash is so to me it sounds like the hash value of the whole document, maybe used for comparing pages, caching? One famous site gives this explanation:

Definition and Usage The hash property returns the anchor portion of a URL, including the hash sign (#)

An anchor is a place at the document where the programmer can make a link to if I got it right?

I have also come across this use of document.location.hash in some security related scripts and i have seen questions here at stack overflow where its used but never really have the focus and therefore don't get explained in great detail.

So what is this really? And where is it used? Please also give some example of a general usercase if it exists

2
javascriptjquery
the hash is nothing more than a string. It usually relates to a location on the page, however it can also store data. - Kevin B
W3C on location.hash: "If the... current location has a fragment identifier, then the value of the hash attribute of [window.location] must be the string concatenation of the hash mark (#) and the fragment identifier. " - apsillers

2 Answers

3
votes

The hash appears at the end of a URL and is used like a bookmark in a document.

e.g. http://en.wikipedia.org/wiki/Hyperlink#Hyperlinks_in_HTML

From Wikipedia

How hyperlinks work in HTML

A link from one domain to another is said to be outbound from its source anchor and inbound to its target.

The most common destination anchor is a URL used in the World Wide Web. This can refer to a document, e.g. a webpage, or other resource, or to a position in a webpage. The latter is achieved by means of an HTML element with a "name" or "id" attribute at that position of the HTML document. The URL of the position is the URL of the webpage with a fragment identifier — "#id attribute" — appended.

P.S. note how when clicking on the link for the Wikipedia article the page "jumps" to a specific section? This is achieved by specifying the hash

1
votes

From MDN window location

hash

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 #. You can listen for the hashchange event to get notified of changes to the hash in supporting browsers.

It basically is used so you can link to sections of the page. Look at this link: ...t-in-general/17949617#17949617 It links to my answer via the #17949617 It connects with the anchor on the page that has the id that matches.