What You Need To Know About JavaScript Window Location

The location property of a window is a reference to a Location object which represents the current URL of the document being displayed in that window.

Since the window object is at the top of the scope, the properties of the window.location object can be accessed without a window prefix. There’s no need to write full window.location.href, you can simply use location.href. In this article, we will look at how you can get the URL of a page as well as hostname, protocol, etc. Everything by using the location property of the window object.

How To Get The Current Page URL In JavaScript

For this, you can use the window.location.href property. This will get you the entire URL of the current page. Let’s look at the example:

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

How To Get Different Part Of URL In JavaScript

You can use other properties of the location object such as protocol, hostname, port, pathname, search, etc. to obtain different parts of the URL. Here’s how:

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

How To Load New Documents In JavaScript

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

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

You can use the replace() method to load new documents like assign(). The difference is that it doesn’t create an entry in the browser’s history, a 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.simplywebstuff.com");
}
</script>
 
<button type="button" onclick="loadHomePage();">Load Home Page</button>

Or you can use the window.location.href property to load new documents. It will give you the same effect as using assign() method. Here’s an example:

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

How To Reload The Page Dynamically In JavaScript

Simply use the reload() method to reload the current page dynamically. Optionally you can specify a boolean parameter true or false. If the parameter is set to true – the method will force the browser to reload the page from the server. If not – the browser will 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>