JavaScript Window Location

In this tutorial you will learn about the JavaScript window location object.

The Location Object

The location property of a window (i.e. window.location) is a reference to a Location object; it represents the current URL of the document being displayed in that window.

Since window object is at the top of the scope chain, so properties of the window.location object can be accessed without window. prefix, for example window.location.href can be written as location.href. The following section will show you how to get the URL of page as well as hostname, protocol, etc. using the location object property of the window object.

Getting the Current Page URL

You can use the window.location.href property to get the entire URL of the current page.

The following example will display the complete URL of the page on button click:

<script>
function getURL() {
    alert("The URL of this page is: " + window.location.href);
}
</script>
 
<button type="button" onclick="getURL();">Get Page URL</button>

Getting Different Part of a URL

Similarly, you can use other properties of the location object such as protocol, hostname, port, pathname, search, etc. to obtain different part of the URL.

Try out the following example to see how to use the location property of a window.

// Prints complete URL
document.write(window.location.href);
  
// Prints protocol like http: or https:
document.write(window.location.protocol); 
 
// Prints hostname with port like localhost or localhost:3000
document.write(window.location.host);
  
// Prints hostname like localhost or www.example.com
document.write(window.location.hostname);
 
// Prints port number like 3000
document.write(window.location.port);
  
// Prints pathname like /products/search.php
document.write(window.location.pathname); 
 
// Prints query string like ?q=ipad
document.write(window.location.search);
 
// Prints fragment identifier like #featured
document.write(window.location.hash);

Loading New Documents

You can use the assign() method of the location object i.e. window.location.assign() to load another resource from a URL provided as parameter, for example:

<script>
function loadHomePage() {
    window.location.assign("https://www.tutorialrepublic.com");
}
</script>
 
<button type="button" onclick="loadHomePage();">Load Home Page</button>

You can also use the replace() method to load new document which is almost the same as assign(). The difference is that it doesn't create an entry in the browser's history, meaning the user won't be able to use the back button to navigate to it. Here's an example:

<script>
function loadHomePage(){
    window.location.replace("https://www.tutorialrepublic.com");
}
</script>
 
<button type="button" onclick="loadHomePage();">Load Home Page</button>

Alternatively, you can use the window.location.href property to load new document in the window. It produce the same effect as using assign() method. Here's is an example:

<script>
function loadHomePage() {
    window.location.href = "https://www.tutorialrepublic.com";
}
</script>
 
<button type="button" onclick="loadHomePage();">Load Home Page</button>

Reloading the Page Dynamically

The reload() method can be used to reload the current page dynamically.

You can optionally specify a Boolean parameter true or false. If the parameter is true, the method will force the browser to reload the page from the server. If it is false or not specified, the browser may reload the page from its cache. Here's an example:

<script>
function forceReload() {
    window.location.reload(true);
}
</script>
 
<button type="button" onclick="forceReload();">Reload Page</button>