Skip to content

JavaScript window location | Object

  • by

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:

PropertyDescription
window.location.hrefThe complete URL of the current page, including protocol, domain, path, and query parameters.
window.location.protocolThe protocol part of the URL (e.g., “http:” or “https:”).
window.location.hostnameThe hostname (domain) part of the URL.
window.location.portThe port number specified in the URL.
window.location.pathnameThe path of the URL, which comes after the domain and before the query parameters.
window.location.searchThe query string of the URL, including the leading “?” character.
window.location.hashThe 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&param2=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:

JavaScript window location Object

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

Leave a Reply

Discover more from Tutorial

Subscribe now to keep reading and get access to the full archive.

Continue reading