Javascript Location Object

Javascript Location object has a lot of information, which can be handy at times. I used to log the object each time I wanted to get the informations set, so this is a reference sheet for me and any awesome ones :D.

Insert console.log(window.location); on a page and load it, you find the information in browser console. A blank location object looks like this

window.location = {
	hash		: "",
	host		: "",
	hostname	: "",
	href	 	: "",
	origin		: "",
	pathname	: "",
	port		: "",
	protocol	: "",
	search		: "",
	replace		: 'function replace() { [native function] }',
	assign		: 'function assign() { [native function] }',
	reload		: 'function reload() { [native function] }'
}

Let’s find it in action, here is the console output for the url http://techstream.org:80/Bits/Javascript/Javascript-Location-Object?s=jacascript+location+object#test-hash

You might find a few more tags for the location object depending on your browser. This is a list if informations found by all major browsers at the time of publishing.

window.location = {
	hash		: "#test-hash",
	host		: "techstream.org",
	hostname	: "techstream.org",
	href	 	: "http://techstream.org/Bits/Javascript/Javascript-Location-Object?s=jacascript+location+object#test-hash",
	origin		: "http://techstream.org",
	pathname	: "/Bits/Javascript/Javascript-Location-Object",
	port		: "80",
	protocol	: "http",
	search		: "?s=jacascript+location+object",
	replace		: 'function replace() { [native function] }',
	assign		: 'function assign() { [native function] }',
	reload		: 'function reload() { [native function] }'
}

To make things interesting I have logged the location object on this page, so open your browser console and experience things in action.

Applications

The object finds its use in many situations, the use I encounter when preparing this article is to detect the existence of #hash at end of URL to solve the overlapping issue caused with Fixed header ( Issue on Github ) on Mozilla Support portal. I also used it a little back to detect the host and more.

A few applications I found with just a swipe of my experience as a web user are

• JavaScript Redirect. window.location = ' Destination with http(s) ';
• Detect the type of link, Domain, Search parameter, hash value and more

And lot more, this is the open web.