JavaScript Location Object

The location object in JavaScript helps in storing the information of current URL of the window object. It is a child object of the window object.

The location object has the following two features:

Properties
Methods

JavaScript Location Object Properties

The table given below describes the properties of the Location object in JavaScript.

Property	Description	Example
href	represents a string specifying the entire URL	http://codescracker.com:80?test.asp?id=1#start
protocol	represents a string at the beginning of a URL up to the first colon (:), which specifies the method of access to the URL	http: or https:
host	represents a string consisting of the hostname and port strings	codescracker.com:80
hostname	represents the server name, subdomain, and domain name of a URL	codescracker.com
port	represents a string specifying the communications port that the server uses	80
pathname	represents a string portion of a URL specifying how a particular resource can be accessed	test.asp
search	represents a string beginning with a question mark that specifies any query information in an HTTP URL	id=1
hash	represents a string beginning with a # specifies an anchor name in an HTTP URL	start

JavaScript Location Object Methods

The following table lists the methods of the Location object in JavaScript.

Method	Description
assign()	Loads a new document in the browser
reload()	reloads the current document that is contained in the location.href property
replace()	replaces the current document with the specified new one, you can not navigate back to the previous document using the browser's Back button

JavaScript Location Object Example

Here is an example demonstrates location object in JavaScript:

<!DOCTYPE HTML>
<html>
<head>
   <title>JavaScript Location Object</title>
   <script type="text/javascript">
      function gotoUrl()
      {
         window.location.href = window.document.loctn.ProtocolFld.
         options[window.document.loctn.ProtocolFld.selectedIndex].
         text + document.loctn.HostnameFld.value + document.loctn.
         PathnameFld.value
      }
   </script>
</head>
<body>

<h3>Enter URL in following sections</h3>
<form name="loctn" method="post">
<pre>Protocol:
<select name="ProtocolFld" size="1">
<option>http://</option>
<option>file://</option>
<option>javascript:</option>
<option>ftp://</option>
<option>mailto:</option>
</select>
</pre>
<pre>
Hostname:
<input type="text" size="20" maxlength="256" name="HostnameFld" value="codescracker.com">
</pre>
<pre>
Pathname:
<input type="text" size="20" maxlength="100" name="PathnameFld" value="/">
</pre>
<pre>
<input type="button" name="Go" value="Go" onclick="gotoUrl()">
</pre>
</form>
   
</body>
</html>

Here is the sample output of the above JavaScript location object example code:

Now fill (or edit and fill) the required field as shown in the following snapshot:

After filling the required field as shown in the above figure, click on Go button to go to that url. Here is the sample output after clicking on the Go button: