Location object, which is itself a property of the
Window object. You can create a new
Location object that contains the current URL as follows:
var currentURL = window.location;
In this tutorial, you explore all the properties and methods of the
Location object. You learn:
- How to read all the different parts of a URL
- How to send the visitor to another page by changing the URL, and
- How to automatically reload or refresh the page.
The anatomy of a URL
A URL can be broken down into as many as six components, though many of them are optional:
The only required components of a URL are the protocol and the hostname; all other components are optional.
Here's an example of a URL with all these components:
In this example,
http: is the protocol,
www.example.com is the hostname,
80 is the port,
/example.cgi is the pathname,
?x=3&y=4 is the search, or query string, and
#results is the hash, or the anchor to display within the page.
Reading the current URL through the
You can access all of these URL components using
Location properties of the same names. You can also access the following properties:
- Contains the
portcombined into one string, e.g.
- Contains the complete URL, e.g.
Here are some examples (assume that the example URL above is displayed in the browser's address bar at the time the code below is run):
var currentURL = window.location; alert ( currentURL.href ); // Displays 'http://www.example.com:80/example.cgi?x=3&y=4#results' alert ( currentURL.protocol ); // Displays 'http:' alert ( currentURL.host ); // Displays 'www.example.com:80' alert ( currentURL.hostname ); // Displays 'www.example.com' alert ( currentURL.port ); // Displays '80' alert ( currentURL.pathname ); // Displays '/example.cgi' alert ( currentURL.search ); // Displays '?x=3&y=4' alert ( currentURL.hash ); // Displays '#results'
Manipulating the URL using the
You can use the
href property of the
Location object to send visitors to a completely different page:
window.location.href = "http://www.example.com/anotherpage.html";
Here's a simple example:
<input type="button" onclick="window.location.href='http://www.google.com/'" value="Visit www.google.com" />
Here's the resulting button. Click it to visit
www.google.com if you like, then use your browser's Back button to return here.
Location.href property like this keeps the previous URL in the browser's history, so the visitor can click the Back button to return to the previous page. If you don't want the visitor to be able to go back to the previous URL, use
window.location.replace ( "http://www.example.com/anotherpage.html" );
This loads the new URL, and also replaces the current history entry with the new URL, so that the previous URL is effectively wiped from the history.
As well as redirecting the browser to a different URL, you can selectively change parts of the current URL using the
Location object properties. For example, to change the URL's hash to a different anchor within the page:
window.location.hash = "#moreResults";
Here's an example:
<input type="button" onclick="window.location.hash='#top'" value="Jump to the top of the page" />
...and here's the resulting button. Click it, and your browser moves to the top of the page. That's because this page contains an anchor named
#top at the top. Notice how the URL changes in the browser's address bar. (You can click your browser's Back button afterwards to return here.)
Reloading the page
Finally, you can use the
Location.reload() method to force the browser to reload the current URL, just as if the visitor had clicked their Reload/Refresh button:
window.location.reload ( );
To force the browser to retrieve the page directly from the server, bypassing any caches, pass a
true parameter to
window.location.reload ( true );
Here's an example that uses
Location.reload() to create a button to refresh the page:
<input type="button" onclick="window.location.reload()" value="Reload the page" />
Here's the button — click it to see it in action!
Location object. This object is useful for:
- Reloading the current page — either in response to a button click, or automatically. For example, you can use
setInterval()to reload the page periodically.
Responses to this article
2 responses (oldest first):
Post a response
Want to add a comment, or ask a question about this article? Post a response.
To post responses you need to be a member. Not a member yet? Signing up is free, easy and only takes a minute. Sign up now.