JS Location

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

The Location Object

The location property of a window written as ‘window.location’ is a reference to a Location object representing the current URL of the document being displayed in that window.

Properties of the window.location object can be accessed without a window since the window object is at the top of the scope chain. Prefix, for instance, window.location.href can be rewritten as ‘location.href’. You will get to know how to get the URL of a page as well as hostname, protocol, etc. using the location object property of the window object in the following section.
 

Getting the Current Page URL

The window.location.href property can be used briefly to get the entire URL of the current page.

The following example displays the complete URL of the page on a 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>

Try with example

Getting Different Part of a URL

Similarly, Other properties of the location object such as protocol, hostname, port, pathname, search, etc can be used to obtain different parts of the URL.

The following example shows how to use the location property of a window; try it out.

// 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);

Try with example

Note: Unknowingly, you are always connecting to a specific port (e.g. http://localhost:3000) whenever you visit a website. Nevertheless, many browsers won’t display the default port numbers, for instance, 80 for HTTP and 443 for HTTPS.

Loading New Documents

The assign() method of the location object which is the window.location.assign() can be used to load another resource from a URL provided as a parameter, for example: Load Home Page</button>

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

Try with example

Also, the replace() method can be used to load new documents which are almost the same as assign(). The main difference between replacing () and assign() is that the former 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: Load Home Page</button>

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

Try with example

Alternatively, The ‘window.location.href’ property can be used to load a new document in the window. It brings about the same effect as using the assign() method. Here's is an example:

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

Try with example

Reloading the Page Dynamically

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

A Boolean parameter can be optionally specified as true or false. The method will force the browser to reload the page from the server only if the parameter is true. If not (i.e 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>

Try with example

Note: The result of calling reload() method is quite different from clicking the browser's Reload/Refresh button. The reload() method clears form control values that may simply be retained by clicking the Reload/Refresh button in some browsers.