location Object

Contact Us or call 1-877-932-8228
location Object

location Object

The location object is also a property of the window object, therefore you can call the methods directly in your JavaScript like a global function. Here are a few properties and methods of the location object.

location Properties
Property Description
href Returns the full location of the page. The value can be set to change the page.
protocol Returns the protocol used to deliver the page (e.g., "http").
host Returns the host of the page (e.g., "www.webucator.com"). It will include the port if included.
hostname Returns the host of the page (e.g., "www.webucator.com"), but not the port.
port Returns the port of the host if included (e.g., "80").
pathname Returns the path after the domain name (e.g., "/webdesign/javascript.cfm" for http://www.webucator.com/webdesign/javascript.cfm.
search Returns the querystring, including the question mark (e.g., "?q=javascript+training" for http://www.google.com/search?q=javascript+training.
hash Returns the hash, including the hash mark (e.g., "#dom-location-hash" for http://www.w3.org/TR/html5/history.html#dom-location-hash.
location Methods
Method Description
assign(url) Navigates to the url argument. Same as location.href=url;.
replace(url) Replaces the current page in the history stack with the url argument.
reload() Reloads the page.

The properties and methods above are demonstrated in the following code sample:

Code Sample:

<meta charset="UTF-8">
<title>Location Info</title>
<h1>location Object Properties</h1>
	<li><a href="?firstName=Nat">Add Search</a></li>
	<li><a href="#props">Add Hash</a></li>
	<li><a href="javascript:location.replace('#props')">Add Hash with <code>replace()</code></a></li>
	<li><a href="javascript:location.assign('#props')">Add Hash with <code>assign()</code></a></li>
	<li><a href="javascript:location.reload()">Reload</a></li>
	<li><a href="location.html">Start Over</a></li>

<ol id="props">
	<li>href: <strong><script type="text/javascript">document.write(location.href);</script></strong></li>
	<li>protocol: <strong><script type="text/javascript">document.write(location.protocol);</script></strong></li>
	<li>host: <strong><script type="text/javascript">document.write(location.host);</script></strong></li>
	<li>hostname: <strong><script type="text/javascript">document.write(location.hostname);</script></strong></li>
	<li>port: <strong><script type="text/javascript">document.write(location.port);</script></strong></li>
	<li>pathname: <strong><script type="text/javascript">document.write(location.pathname);</script></strong></li>
	<li>search: <strong><script type="text/javascript">document.write(location.search);</script></strong></li>
	<li>hash: <strong><script type="text/javascript">document.write(location.hash);</script></strong></li>
	<li>history.length: <strong><script type="text/javascript">document.write(history.length);</script></strong></li>

Most of the location properties and methods above are only used in advanced applications that require customizing how the site/application responds to the user pressing the Back and Forward buttons. The exception is the href property, which is commonly used to create "button links" as you'll see in the exercise that follows.