• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

JavaScript

coding learning websites codepractice

JS Basics

JS Variables & Operators

JS Data Types & Conversion

JS Numbers & Math

JS Strings

JS Dates

JS Arrays

JS Control Flow

JS Loops & Iteration

JS Functions

JS Objects

JS Classes & Modules

JS Async Programming

JS Advanced

JS HTML DOM

JS BOM (Browser Object Model)

JS Web APIs

JS AJAX

JS JSON

JS Graphics & Charts

JavaScript Location Object

← Previous Next →

The JavaScript Location Object is part of the Browser Object Model (BOM). It lets you access the current page’s URL, redirect to another page, or reload the page.

In simple words, it helps your website know where it is in the browser and control navigation.

What is the Location Object?

The location object is part of the window object, so you can access it with window.location or just location.

It contains all the details about the current URL like the protocol (http or https), hostname, pathname, and more.

Example:

console.log(window.location);
console.log(location); // Both are the same

Why Use the Location Object?

The location object is useful when you want to:

  • Get the current URL.

  • Redirect the user to another page.

  • Reload the page.

  • Extract specific parts of the URL.

  • Work with query parameters in a simple way.

Location Object Properties

Here are the most commonly used properties:

Property What It Shows Example
location.href Full URL of the current page https://example.com/page.html
location.protocol Protocol used (http: or https:) https:
location.host Hostname with port (if any) example.com:8080
location.hostname Hostname only example.com
location.port Port number 8080
location.pathname Path of the page /page.html
location.search Query string (?key=value) ?id=123
location.hash Anchor part (#section) #contact

Example:

console.log("Full URL:", location.href);
console.log("Protocol:", location.protocol);
console.log("Host:", location.host);
console.log("Path:", location.pathname);
console.log("Query:", location.search);
console.log("Anchor:", location.hash);

Redirecting Users

You can use the location object to send users to another page. There are two common methods:

1. location.href

// Redirect to Google
location.href = "https://www.google.com";

This works like clicking a link. The user can press the back button to return.

2. location.replace()

// Redirect without adding history
location.replace("https://www.example.com");

replace() redirects the page without keeping the current page in the browser history. Users cannot go back with the back button.

Reloading the Page

Sometimes you want to reload the page dynamically. Use:

// Reload the current page
location.reload();

Optional: location.reload(true) forces a reload from the server instead of cache, though modern browsers may ignore true.

Working with Query Parameters

If your URL has query parameters like ?id=123&name=Vicky, you can access them easily.

console.log("Query String:", location.search); // "?id=123&name=Vicky"

// Using URLSearchParams to get values
let params = new URLSearchParams(location.search);
console.log("ID:", params.get("id"));
console.log("Name:", params.get("name"));

This is very useful for forms, filters, or passing data between pages.

Using Hash for Page Sections

Many websites use # in URLs to scroll to sections, like example.com/page.html#contact.

console.log("Hash:", location.hash); // "#contact"

// Scroll to element dynamically
if(location.hash === "#contact") {
  document.getElementById("contact").scrollIntoView();
}

This way, you can control page navigation without reloading the page.

Changing Parts of the URL Without Reloading

You can change the hash part of the URL without reloading the page:

// Change URL to add a hash
location.hash = "#about";
console.log(location.href); // URL now ends with "#about"

This is useful for single-page applications (SPA) or tabs.

Practical Example: Simple Page Redirection

<button id="homeBtn">Go to Home</button>
<button id="reloadBtn">Reload Page</button>

<script>
document.getElementById("homeBtn").onclick = function() {
  location.href = "https://www.codepractice.in"; // Redirect to home
}

document.getElementById("reloadBtn").onclick = function() {
  location.reload(); // Reload current page
}
</script>

  • Clicking the first button redirects to the home page.

  • Clicking the second button reloads the current page.

Best Practices

  1. Use location.replace() if you don’t want the user to go back to the previous page.

  2. Avoid changing location.href too frequently — it can annoy users.

  3. Use URLSearchParams for query strings instead of manually splitting strings.

  4. For single-page apps, use location.hash to navigate sections without full reload.

  5. Always check that URLs are correct before redirecting — to avoid broken pages.

Summary of the Tutorial

The JavaScript Location Object is a powerful tool for working with URLs and page navigation. With it, you can:

  • Get the full URL or parts of it like protocol, host, path, query string, and hash.

  • Redirect users to another page using href or replace().

  • Reload the current page dynamically.

  • Work with query parameters and hashes for smooth navigation.

Mastering the location object is essential for creating dynamic and interactive websites that can control page flow and URL behavior.

Practice Questions

  1. How can you get the full URL of the current webpage using the location object?

  2. Write a script to display the protocol (http: or https:) and hostname of the current page.

  3. How can you redirect a user to https://www.google.com using location.href?

  4. What is the difference between location.href and location.replace() when redirecting a page? Give an example.

  5. Write code to reload the current page when a button is clicked using location.reload().

  6. How can you access and display the pathname and port number of the current URL?

  7. If a URL contains query parameters like ?id=123&name=Vicky, how can you extract the values of id and name?

  8. How can you detect and log the hash part of the URL (e.g., #contact) and scroll to the corresponding section?

  9. Write code to dynamically change the URL hash to #about without reloading the page.

  10. Create a simple page with two buttons: one redirects to a new page, and the other reloads the current page using the location object.

← Previous Next →

JavaScript

online coding class codepractice

JS Basics

JS Variables & Operators

JS Data Types & Conversion

JS Numbers & Math

JS Strings

JS Dates

JS Arrays

JS Control Flow

JS Loops & Iteration

JS Functions

JS Objects

JS Classes & Modules

JS Async Programming

JS Advanced

JS HTML DOM

JS BOM (Browser Object Model)

JS Web APIs

JS AJAX

JS JSON

JS Graphics & Charts

codepractice logo
Login
Go Back Top