Javascript Location Object

Javascript Location object comes bundled with a ton on informations that can be used for various applications.

Advert

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.

Comments

Wow ! you have someting to tell us. That's great! Please keep in mind that comments are moderated, we employ rel="nofollow" for links, avoid using a spammy word or a domain in name field, it might end up as a Spam. Thanks for reading.

Last 5 Articles

All Articles >

  1. Mitigating Risks In Custom Software Development

     
  2. Container Security to Secure Microservices

     
  3. Strategic Messaging

     
  4. URL Shortener in Django

     
  5. MySQL as Database Option

     

News Letter

Subscribe to our email newsletter for useful tips and valuable resources, sent out every new article release.