Window.location

  • Revision slug: DOM/window.location
  • Revision title: window.location
  • Revision id: 34165
  • Created:
  • Creator: RobG
  • Is current revision? No
  • Comment /* Example */ added more examples

Revision Content

{{template.DomRef()}}

Summary

window.location returns an object whose default value is the current URL. It can also be used to change the URL.

Syntax

url = window.location 
window.location = url

Properties

  • hashstring get or set the part of the href that follows the # symbol.
  • hoststring get or set the host name and port number of the href.
  • hrefstring get or set entire URL.
  • pathnamestring get or set the pathname of the href.
  • portstring get or set the port number of the href.
  • protocolstring get or set the protocol of the href.
  • searchstring get or set the part of the href that follows the ? symbol.

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

DOM Level 0. Not part of specification.

Revision Source

<p>
{{template.DomRef()}}
</p>
<h3 name="Summary">Summary</h3>
<p><b>window.location</b> returns an object whose default value is the current URL.  It can also be used to change the URL.
</p>
<h3 name="Syntax">Syntax </h3>
<pre class="eval"><i>url</i> = window.location 
window.location = <i>url</i>
</pre>
<h3 name="Properties">Properties</h3>
<ul><li><code>hash</code>—<i>string</i> get or set the part of the <code>href</code> that follows the # symbol.
</li><li><code>host</code>—<i>string</i> get or set the host name and port number of the <code>href</code>.
</li><li><code>href</code>—<i>string</i> get or set entire URL.
</li><li><code>pathname</code>—<i>string</i> get or set the pathname of the <code>href</code>.
</li><li><code>port</code>—<i>string</i> get or set the port number of the <code>href</code>.
</li><li><code>protocol</code>—<i>string</i> get or set the protocol of the <code>href</code>.
</li><li><code>search</code>—<i>string</i> get or set the part of the <code>href</code> that follows the ? symbol.
</li></ul>
<h3 name="Methods">Methods</h3>
<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>DOM Level 0. Not part of specification.
</p>
Revert to this revision