JavaScript Window Location. Here’s What You Need To Know

Posted by TotalDC

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 window object is at the top of the scope, properties of the window.location object can be accessed without window prefix. Basically 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 location property of window object.

How To Get The Current Page URL Using JavaScript

For this you can use the window.location.href property. This will get you the entire URL of 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 Using JavaScript

You can use other properties of the location object such as protocol, hostname, port, pathname, search etc. to obtain different part 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 Using 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 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 document like assign(). The difference is that it doesn’t create an entry in the browser’s history, 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 document. 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 Using JavaScript

Simply use the reload() method to reload 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>

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: