Window.location

  • Revision slug: DOM/window.location
  • Revision title: window.location
  • Revision id: 34170
  • Created:
  • Creator: Callek
  • Is current revision? No
  • Comment /* Properties */ Lets not linkify this here

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. http://www.google.com:80/search?q=devmo#test
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

Method Description
assign(url) Load the document at the provided URL.
reload(forceget) Reload the document from the current URL. forceget is a boolean, which, when it is true, causes the page to always be reloaded from the server. If it is false or not specified, the browser may reload the page from its cache.
replace(url) Replace the current document with the one at the provided URL. The difference from the assign() method is that after using replace() the current page will not be saved in session history, meaning the user won't be able to use the Back button to navigate to it.
toString() Returns the string representation of the URL. See the JavaScript reference for details.

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><span class="plain">http://www.google.com:80/search?q=devmo#test</span></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>
<table class="fullwidth-table">
<tbody><tr>
<th>Method</th>
<th>Description</th>
</tr>
<tr>
<td><code>assign(url)</code></td>
<td>Load the document at the provided URL.</td>
</tr>
<tr>
<td><code>reload(forceget)</code></td>
<td>Reload the document from the current URL. <code>forceget</code> is a boolean, which, when it is <code>true</code>, causes the page to always be reloaded from the server. If it is <code>false</code> or not specified, the browser may reload the page from its cache.</td>
</tr>
<tr>
<td><code>replace(url)</code></td>
<td>Replace the current document with the one at the provided URL. The difference from the <code>assign()</code> method is that after using <code>replace()</code> the current page will not be saved in session history, meaning the user won't be able to use the Back button to navigate to it.</td>
</tr>
<tr>
<td><code>toString()</code></td>
<td>Returns the string representation of the URL. See the <a href="en/Core_JavaScript_1.5_Reference/Global_Objects/Object/toString">JavaScript reference</a> for details.</td>
</tr>
</tbody></table>
<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