Window.location

  • Revision slug: DOM/window.location
  • Revision title: window.location
  • Revision id: 34191
  • Created:
  • Creator: masondesu
  • Is current revision? No
  • Comment forgot to add the Deki transform thing to my example in the last edit. fixed; one or more formatting changes

Revision Content

{{ 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

This section describes the properties and methods of the location object.

Use as a string

Location objects have a toString method returning the current URL. You can also assign a string to window.location. This means that you can work with window.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(window.location.toString().charAt(17));

Properties

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

The "Example" column contains the values of the properties of the following URL:

  • http://[www.google.com]:80/search?q=devmo#test
Property Description Example
hash the part of the URL that follows the # symbol, including the # symbol.
You can listen for the hashchange event to get notified of changes to the hash in supporting browsers.
#test
host the host name and port number. [www.google.com]:80
hostname the host name (without the port number or square brackets). 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, including the ? symbol. ?q=devmo

If the hash part of the URL contains encoded characters (see Core_JavaScript_1.5_Reference:Global_Functions:encodeURIComponent), hash returns the decoded URL part. This is a bug in Firefox. href, search and pathname return the correct, encoded URL parts. For example:

  • http://www.google.com/search?q=Fire%20fox#Fire%20fox

results in:

  • hash=#Fire fox
  • search=?q=Fire%20fox

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 Location object's 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>

Note: The example above works in situations where window.location.hash does not need to be retained. However, in Gecko-based browsers, setting window.location.pathname in this manner will erase any information in window.location.hash, whereas in WebKit (and possibly other browsers), setting the pathname will not alter the the hash. If you need to change pathname but keep the hash as is, use the replace() method instead, which should work consistently across browsers.


Consider the following example, which will reload the page by using the replace() method to insert the value of window.location.pathname into the hash (similar to Twitter's reload of http://twitter.com/username to http://twitter.com/#!/username):

function reloadPageWithHash() {  var initialPage = window.location.pathname;
 window.location.replace('http://example.com/#' + initialPage);
} 

 


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).

See also

Manipulating the browser history

Specification

{{ DOM0() }}

{{ languages( { "fr": "fr/DOM/window.location", "ja": "ja/DOM/window.location" } ) }}

Revision Source

<p>{{ DomRef() }}</p>
<h3 name="Summary">Summary</h3>
<p>Returns a <a href="#Location_object"> <code>Location</code> object</a>, 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 <em>locationObj</em> = window.location;
window.location = <em>newLocation</em>;
</pre>
<p>where</p>
<ul> <li><em>locationObj</em> 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><em>newLocation</em> 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>This section describes the properties and methods of the location object.</p>
<h4 name="Use_as_a_string">Use as a string</h4>
<p><code>Location</code> objects have a <code>toString</code> method returning the current URL. You can also assign a string to <code>window.location</code>. This means that you can work with <code>window.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" title="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="brush: js">alert(window.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 the current URL or set them to navigate to another URL.</p>
<p>The "Example" column contains the values of the properties of the following URL:</p>
<ul> <li><span class="nowiki">http://[www.google.com]:80/search?q=devmo#test</span></li>
</ul>
<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, including the # symbol.<br> You can listen for the <a href="/en/DOM/window.onhashchange" title="en/DOM/window.onhashchange">hashchange event</a> to get notified of changes to the hash in supporting browsers.</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 or square brackets).</td> <td>www.google.com</td> </tr> <tr> <td><code>href</code></td> <td>the entire URL.</td> <td><span class="nowiki">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, including the ? symbol.</td> <td>?q=devmo</td> </tr> </tbody>
</table>
<p>If the hash part of the URL contains encoded characters (see <a href="/en/JavaScript/Reference/Global_Objects/encodeURIComponent" title="en/Core_JavaScript_1.5_Reference/Global_Functions/encodeURIComponent">Core_JavaScript_1.5_Reference:Global_Functions:encodeURIComponent</a>), <code>hash</code> returns the decoded URL part. This is a <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=483304" title="https://bugzilla.mozilla.org/show_bug.cgi?id=483304">bug</a> in Firefox. <code>href</code>, <code>search</code> and <code>pathname</code> return the correct, encoded URL parts. For example:</p>
<ul> <li><span class="nowiki">http://www.google.com/search?q=Fire%20fox#Fire%20fox</span></li>
</ul>
<p>results in:</p>
<ul> <li><span class="nowiki">hash=#Fire fox</span></li> <li><span class="nowiki">search=?q=Fire%20fox</span></li>
</ul>
<h4 name="Methods">Methods</h4>
<table class="fullwidth-table"> <tbody> <tr> <th>Method</th> <th>Description</th> </tr> <tr> <td><code id="assign">assign(url)</code></td> <td>Load the document at the provided URL.</td> </tr> <tr> <td><code id="reload">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 id="replace">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 id="toString">toString()</code></td> <td>Returns the string representation of the <code>Location</code> object's URL. See the <a href="/en/JavaScript/Reference/Global_Objects/Object/toString" title="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 class="brush: js">function goMoz() { 
   window.location = "http://www.mozilla.org";
} 

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

</pre>
<div class="warning"><strong>Note:</strong> The example above works in situations where <code>window.location.hash</code> does not need to be retained. However, in Gecko-based browsers, setting <code>window.location.pathname</code> in this manner will erase any information in <code>window.location.hash</code>, whereas in WebKit (and possibly other browsers), setting the pathname will not alter the the hash. If you need to change pathname but keep the hash as is, use the <code>replace()</code> method instead, which should work consistently across browsers.</div>
<p><br>
Consider the following example, which will reload the page by using the <code>replace()</code> method to insert the value of <code>window.location.pathname</code> into the hash (similar to Twitter's reload of <a class=" external" href="http://twitter.com/username" rel="freelink">http://twitter.com/username</a> to <a class=" external" href="http://twitter.com/#!/username" rel="freelink">http://twitter.com/#!/username</a>):</p>
<pre class="brush: js">function reloadPageWithHash() {  var initialPage = window.location.pathname;
 window.location.replace('http://example.com/#' + initialPage);
} 
</pre>
<p> </p>
<p><br>
Display the properties of the current URL in an alert dialog:</p>
<pre class="brush: js"> 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 class="brush: js">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>See also</h3>
<p><a href="/en/DOM/Manipulating_the_browser_history" title="en/DOM/Manipulating the browser history">Manipulating the browser history</a></p>
<h3 name="Specification">Specification</h3>
<p>{{ DOM0() }}</p>
<p>{{ languages( { "fr": "fr/DOM/window.location", "ja": "ja/DOM/window.location" } ) }}</p>
Revert to this revision