Window.location

  • Revision slug: DOM/window.location
  • Revision title: window.location
  • Revision id: 371807
  • Created:
  • Creator: jacefarm
  • Is current revision? No
  • Comment fixed a grammatical error

Revision Content

Returns a location object with information about the current location of the document. Assigning to the location property changes the current page to the new address.

Syntax

var oldLocation = window.location;
window.location = newLocation;

where

  • oldLocation 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.

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.example.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.example.com:80
hostname the host name (without the port number or square brackets). www.example.com
href the entire URL. http://www.example.com:80/search?q=devmo#test
origin the origin of the URL. http://www.example.com:80
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

Note: In Firefox if the hash part of the URL contains encoded characters, hash will return the decoded URL part ({{bug(483304)}}).  href, search and pathname however correctly return the still encoded URL parts.

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.

Examples

Example: Navigate to a new page

window.location.assign("http://www.mozilla.org"); // or
window.location = "http://www.mozilla.org";

Example: Force reloading the current page from the server

window.location.reload(true);

Specification

{{SpecName("HTML WHATWG", "#the-location-interface")}}

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support {{ CompatVersionUnknown() }} {{CompatVersionUnknown}} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }}
window.location.origin {{CompatUnknown()}} {{CompatGeckoDesktop(21)}} {{CompatUnknown()}} {{CompatUnknown()}} {{CompatUnknown()}}
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{ CompatVersionUnknown() }} {{CompatVersionUnknown}} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }}
window.location.origin {{CompatUnknown()}} {{CompatGeckoMobile(21)}} {{CompatUnknown()}} {{CompatUnknown()}} {{CompatUnknown()}}

See also

Revision Source

<p>Returns a location object with information about the current location of the document. Assigning to the location property changes the current page to the new address.</p>
<h2 id="Syntax" name="Syntax">Syntax</h2>
<pre class="syntaxbox">
var oldLocation = window.location;
window.location = newLocation;
</pre>
<p>where</p>
<ul>
  <li><em>oldLocation</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>
<h2 id="Properties" name="Properties">Properties</h2>
<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. The "Example" column contains the values of the properties of the following URL:<code> http://www.example.com:80/search?q=devmo#test</code></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, including the # symbol.<br />
        You can listen for the <a href="/en-US/docs/Mozilla_event_reference/hashchange">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.example.com:80</td>
    </tr>
    <tr>
      <td><code>hostname</code></td>
      <td>the host name (without the port number or square brackets).</td>
      <td>www.example.com</td>
    </tr>
    <tr>
      <td><code>href</code></td>
      <td>the entire URL.</td>
      <td><span class="nowiki">http://www.example.com:80/search?q=devmo#test</span></td>
    </tr>
    <tr>
      <td><code>origin</code></td>
      <td>the origin of the URL.</td>
      <td><span class="nowiki">http://www.example.com:80</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&nbsp;? symbol, including the&nbsp;? symbol.</td>
      <td>?q=devmo</td>
    </tr>
  </tbody>
</table>
<div class="note">
  <p><strong>Note:</strong> In Firefox if the hash part of the URL contains encoded characters, <code>hash</code> will return the decoded URL part ({{bug(483304)}}). &nbsp;<code>href</code>, <code>search</code> and <code>pathname</code> however correctly return the still encoded URL parts.</p>
</div>
<h2 id="Methods" name="Methods">Methods</h2>
<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>
<h2 id="Example" name="Example">Examples</h2>
<h3 id="Example.3A_Navigate_to_a_new_page">Example: Navigate to a new page</h3>
<pre class="brush: js">
window.location.assign("http://www.mozilla.org"); // or
window.location = "http://www.mozilla.org";
</pre>
<h3 id="Example.3A_Force_reloading_the_current_page_from_the_server">Example: Force reloading the current page from the server</h3>
<pre class="brush: js">
window.location.reload(true);</pre>
<h2 id="Specification" name="Specification">Specification</h2>
<p>{{SpecName("HTML WHATWG", "#the-location-interface")}}</p>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari (WebKit)</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
      </tr>
      <tr>
        <td><code>window.location.origin</code></td>
        <td>{{CompatUnknown()}}</td>
        <td>{{CompatGeckoDesktop(21)}}</td>
        <td>{{CompatUnknown()}}</td>
        <td>{{CompatUnknown()}}</td>
        <td>{{CompatUnknown()}}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE&nbsp;Phone</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
      </tr>
      <tr>
        <td><code>window.location.origin</code></td>
        <td>{{CompatUnknown()}}</td>
        <td>{{CompatGeckoMobile(21)}}</td>
        <td>{{CompatUnknown()}}</td>
        <td>{{CompatUnknown()}}</td>
        <td>{{CompatUnknown()}}</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="See_also">See also</h2>
<ul>
  <li><a href="/en/DOM/Manipulating_the_browser_history" title="en/DOM/Manipulating the browser history">Manipulating the browser history</a></li>
  <li><code><a href="/en-US/docs/DOM/window.history" title="/en-US/docs/DOM/window.history">window.history</a></code></li>
  <li><a href="/en-US/docs/DOM/Mozilla_event_reference/hashchange" title="/en-US/docs/DOM/Mozilla_event_reference/hashchange">hashchange</a></li>
</ul>
Revert to this revision