The location property of a window (window.location) refers to a Location object, which represents the current URL of the document displayed in that window.
Because the window object is at the top of the scope chain, properties of the location object can be accessed without the window. prefix. For instance, window.location.href can simply be written as location.href. The next section demonstrates how to retrieve the URL of the page, as well as details like the hostname and protocol, using the properties of the location object within the window object.
You can utilize the location.href property to retrieve the complete URL of the current page.
The following example will display the full URL of the page when a button is clicked:
<script>
function getURL() {
alert("The URL of this page is: " + window.location.href);
}
</script>
<button type="button" onclick="getURL();">Get Page URL</button>Similarly, you can utilize other properties of the location object such as protocol, hostname, port, pathname, search, etc., to obtain various parts of the URL.
Explore the following example to understand 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);Note: When you visit a website, you're always connecting to a specific port (e.g., http://localhost:3000). However, most browsers typically omit displaying the default port numbers, such as 80 for HTTP and 443 for HTTPS.
You can utilize the assign() method of the location object, i.e., window.location.assign(), to load another resource from a URL provided as a 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 utilize the replace() method to load a new document, which is similar to assign(). The key difference is that replace() does not create an entry in the browser's history, preventing the user from navigating back to it using the browser's back button. Here's an example:
<script>
function loadHomePage(){
window.location.replace("https://www.tutorialrepublic.com");
}
</script>
<button type="button" onclick="loadHomePage();">Load Home Page</button>Another option is to use the window.location.href property to load a new document in the current window. This method achieves the same result as using the assign() method. Here's an example:
<script>
function loadHomePage() {
window.location.href = "https://www.tutorialrepublic.com";
}
</script>
<button type="button" onclick="loadHomePage();">Load Home Page</button>The reload() method is used to refresh the current page dynamically.
You can optionally include a Boolean parameter, either true or false. When set to true, the method forces the browser to reload the page from the server. If set to false or omitted, 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>Note: Using the reload() method produces a different result compared to clicking the browser's Reload/Refresh button. Specifically, the reload() method clears form control values that might otherwise be preserved after using the browser's Reload/Refresh button in certain browsers.