Window.location

  • Revision slug: DOM/window.location
  • Revision title: window.location
  • Revision id: 34167
  • Created:
  • Creator: Nickolay
  • Is current revision? No
  • Comment /* <code>Location</code> object */ reformat the properties list, add an example and a missing property

Revision Content

{{template.DomRef()}}

Summary

Returns a Location object, which contains information about the URL of the document and provides methods for changing that URL. You can also assign to this property to load another URL.

Syntax

var locationObj = window.location;
window.location = newLocation;

where

  • locationObj is an object of type Location, providing information about the current URL and methods to change it. Its properties and methods are described below.
  • newLocation is a Location object or a string, specifying the URL to navigate to.

Location object

Location objects have a toString method returning the current URL. You can also assign a string to document.location. This means that you can work with document.location as if it were a string in most cases. Sometimes, for example when you need to call a String method on it, you have to explicitly call toString:

alert(document.location.toString().charAt(17))

Properties

All of the following properties are strings. You can read them to get information about current URL or set them to navigate to another URL.

The "Example" column contains the values of the properties on this URL: http://www.google.com:80/search?q=devmo#test

Property Description Example
hash the part of the URL that follows the # symbol. #test
host the host name and port number. www.google.com:80
hostname the host name (without the port number). www.google.com
href the entire URL.
pathname the path (relative to the host). /search
port the port number of the URL. 80
protocol the protocol of the URL. http:
search the part of the URL that follows the ? symbol. ?q=devmo

Methods

  • assignfunction Replace the current document with the one at the provided URL.
  • reloadfunction Reload the document from the current URL.
  • replacefunction Replace the current document with the one at the provided URL.

Example

Whenever a property of the location object is modified, a document will be loaded using the URL as if window.location.assign() had been called with the modified URL.

Replace the current document with the one at the given URL:

function goMoz() { 
   window.location = "http://www.mozilla.org";
} 

// in html: <button onclick="goMoz();">Mozilla</button>


Display the properties of the current URL in an alert dialog:

 function showLoc()
 {
   var x = window.location;
   var t = ['Property - Typeof - Value',
            'window.location - ' + (typeof x) + ' - ' + x ];
   for (var prop in x){
     t.push(prop + ' - ' + (typeof x[prop]) + ' - ' +  (x[prop] || 'n/a'));
   }
   alert(t.join('\n'));
 }

// in html: <button onclick="showLoc();">Show location properties</button>


Send a string of data to the server by modifying the search property:

function sendData(dat)
{
  window.location.search = dat;
}

// in html: <button onclick="sendData('Some data');">Send data</button>

The current URL with "?Some%20data" appended is sent to the server (if no action is taken by the server, the current document is reloaded with the modified search string).

Specification

{{template.DOM0()}}

Revision Source

<p>
{{template.DomRef()}}
</p>
<h3 name="Summary"> Summary </h3>
<p>Returns a <code>Location</code> object, which contains information about the URL of the document and provides methods for changing that URL. You can also assign to this property to load another URL.
</p>
<h3 name="Syntax"> Syntax </h3>
<pre class="eval">var <i>locationObj</i> = window.location;
window.location = <i>newLocation</i>;
</pre>
<p>where
</p>
<ul><li> <i>locationObj</i> is an object of type <code>Location</code>, providing information about the current URL and methods to change it. Its properties and methods are described below.
</li><li> <i>newLocation</i> is a <code>Location</code> object or a string, specifying the URL to navigate to.
</li></ul>
<h3 name="Location_object"> <code>Location</code> object </h3>
<p><code>Location</code> objects have a <code>toString</code> method returning the current URL. You can also assign a string to <code>document.location</code>. This means that you can work with <code>document.location</code> as if it were a string in most cases. Sometimes, for example when you need to call a <a href="en/Core_JavaScript_1.5_Reference/Global_Objects/String">String</a> method on it, you have to explicitly call <code>toString</code>:
</p>
<pre class="eval">alert(document.location.toString().charAt(17))
</pre>
<h4 name="Properties"> Properties </h4>
<p>All of the following properties are strings. You can read them to get information about current URL or set them to navigate to another URL.
</p><p>The "Example" column contains the values of the properties on this URL: <span class="plain">http://www.google.com:80/search?q=devmo#test</span>
</p>
<table class="fullwidth-table">
<tbody><tr>
<th>Property</th>
<th>Description</th>
<th>Example</th>
</tr>
<tr>
<td><code>hash</code></td>
<td>the part of the URL that follows the # symbol.</td>
<td>#test</td>
</tr>
<tr>
<td><code>host</code></td>
<td>the host name and port number.</td>
<td>www.google.com:80</td>
</tr>
<tr>
<td><code>hostname</code></td>
<td>the host name (without the port number).</td>
<td>www.google.com</td>
</tr>
<tr>
<td><code>href</code></td>
<td>the entire URL.</td>
<td><a class="external" href="http://www.google.com:80/search?q=devmo#test"></a></td>
</tr>
<tr>
<td><code>pathname</code></td>
<td>the path (relative to the host).</td>
<td>/search</td>
</tr>
<tr>
<td><code>port</code></td>
<td>the port number of the URL.</td>
<td>80</td>
</tr>
<tr>
<td><code>protocol</code></td>
<td>the protocol of the URL.</td>
<td>http:</td>
</tr>
<tr>
<td><code>search</code></td>
<td>the part of the URL that follows the ? symbol.</td>
<td>?q=devmo</td>
</tr>
</tbody></table>
<h4 name="Methods"> Methods </h4>
<ul><li><code>assign</code>—<i>function</i> Replace the current document with the one at the provided URL.
</li><li><code>reload</code>—<i>function</i> Reload the document from the current URL.
</li><li><code>replace</code>—<i>function</i> Replace the current document with the one at the provided URL.
</li></ul>
<h3 name="Example"> Example </h3>
<p>Whenever a property of the location object is modified, a document will be loaded using the URL as if <code>window.location.assign()</code> had been called with the modified URL.
</p><p>Replace the current document with the one at the given URL:
</p>
<pre>function goMoz() { 
   window.location = "http://www.mozilla.org";
} 

// in html: &lt;button onclick="goMoz();"&gt;Mozilla&lt;/button&gt;

</pre>
<p><br>
Display the properties of the current URL in an alert dialog:
</p>
<pre> function showLoc()
 {
   var x = window.location;
   var t = ['Property - Typeof - Value',
            'window.location - ' + (typeof x) + ' - ' + x ];
   for (var prop in x){
     t.push(prop + ' - ' + (typeof x[prop]) + ' - ' +  (x[prop] || 'n/a'));
   }
   alert(t.join('\n'));
 }

// in html: &lt;button onclick="showLoc();"&gt;Show location properties&lt;/button&gt;

</pre>
<p><br>
Send a string of data to the server by modifying the <code>search</code> property:
</p>
<pre>function sendData(dat)
{
  window.location.search = dat;
}

// in html: &lt;button onclick="sendData('Some data');"&gt;Send data&lt;/button&gt;

</pre>
<p>The current URL with "?Some%20data" appended is sent to the server (if no action is taken by the server, the current document is reloaded with the modified search string).
</p>
<h3 name="Specification"> Specification </h3>
<p>{{template.DOM0()}}
</p>
Revert to this revision