In JavaScript, the window.location object provides information about the current URL or allows you to modify it. It has various properties and methods that you can use to manipulate the browser’s location.
Here are some commonly used properties of the window.location object:
| Property | Description |
|---|---|
window.location.href | The complete URL of the current page, including protocol, domain, path, and query parameters. |
window.location.protocol | The protocol part of the URL (e.g., “http:” or “https:”). |
window.location.hostname | The hostname (domain) part of the URL. |
window.location.port | The port number specified in the URL. |
window.location.pathname | The path of the URL, which comes after the domain and before the query parameters. |
window.location.search | The query string of the URL, including the leading “?” character. |
window.location.hash | The fragment identifier part of the URL, including the leading “#” character. |
Here’s an example of how you can use window.location to get information about the current URL:
console.log(window.location.href);
console.log(window.location.protocol);
console.log(window.location.hostname);
console.log(window.location.port);
console.log(window.location.pathname);
console.log(window.location.search);
console.log(window.location.hash);
JavaScript window location example
Simple example code.
href: This property returns the complete URL of the current page. You can also set this property to navigate to a new page.
console.log(window.location.href); // Output: "https://www.example.com/page.html"
// Navigate to a new page
window.location.href = "https://www.example.com/new-page.html";
protocol: This property returns the protocol (such as “http:” or “https:”) of the current URL.
console.log(window.location.protocol); // Output: "https:"
hostname: This property returns the hostname of the current URL.
console.log(window.location.hostname); // Output: "www.example.com"
pathname: This property returns the path and filename of the current URL.
console.log(window.location.pathname); // Output: "/page.html"
search: This property returns the query string of the current URL, including the leading “?” character.
console.log(window.location.search); // Output: "?param1=value1¶m2=value2"
hash: This property returns the fragment identifier (anchor) of the current URL, including the leading “#” character.
console.log(window.location.hash); // Output: "#section2"
reload(): This method reloads the current page. You can also pass true as an argument to force a reload from the server instead of the cache.
window.location.reload(); // Reloads the current page
window.location.reload(true); // Forces a server reload of the current page
Here’s the complete code example:
<!DOCTYPE html>
<html>
<head>
<title>window.location Example</title>
</head>
<body>
<h1>Window Location Example</h1>
<script>
// Accessing properties of window.location
console.log(window.location.href); // e.g., "https://www.example.com/index.html?param1=value1#section1"
console.log(window.location.protocol); // e.g., "https:"
console.log(window.location.hostname); // e.g., "www.example.com"
console.log(window.location.port); // e.g., ""
console.log(window.location.pathname); // e.g., "/index.html"
console.log(window.location.search); // e.g., "?param1=value1"
console.log(window.location.hash); // e.g., "#section1"
// Modifying window.location.href to navigate to a new URL
window.location.href = 'https://www.example.com/newpage.html';
</script>
</body>
</html>
Output:
What is Window Location href in JavaScript?
In JavaScript, window.location.href is a property that represents the complete URL (Uniform Resource Locator) of the current webpage. It provides access to the full address of the page, including the protocol (such as “http://” or “https://”), the domain name, the path, and any query parameters.
Here’s an example of how you can use window.location.href in JavaScript:
// Get the current URL
var currentURL = window.location.href;
console.log(currentURL);
// Redirect to a new URL
window.location.href = "https://example.com";
Additionally, window.location.href can be used to redirect the current webpage to a new URL. By assigning a new URL to window.location.href, the browser will navigate to that URL, effectively redirecting the user to the new location.
Do comment if you have any doubts or suggestions on this JS window object topic.
Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.
OS: Windows 10
Code: HTML 5 Version