Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Difference between location.host and location.hostname in JavaScript
JavaScript's Location object provides access to the current URL's components. One can think of this object as a read-only window into the current location.
There are two properties of the Location object that are often confused: location.host and location.hostname. Let's explore their differences with practical examples.
location.host
The host property returns the hostname and port number (if specified) of the current URL.
<!DOCTYPE html>
<html>
<head>
<title>Location Host Example</title>
</head>
<body>
<h3>Current URL Host Information</h3>
<p id="host-output"></p>
<script>
// Display the host property
document.getElementById('host-output').innerHTML =
"location.host: " + location.host;
console.log("Full host:", location.host);
console.log("Includes port if present");
</script>
</body>
</html>
For a URL like https://example.com:8080/path/to/page.html, location.host returns "example.com:8080".
location.hostname
The hostname property returns only the hostname part of the current URL, excluding the port number.
<!DOCTYPE html>
<html>
<head>
<title>Location Hostname Example</title>
</head>
<body>
<h3>Current URL Hostname Information</h3>
<p id="hostname-output"></p>
<script>
// Display the hostname property
document.getElementById('hostname-output').innerHTML =
"location.hostname: " + location.hostname;
console.log("Hostname only:", location.hostname);
console.log("Excludes port number");
</script>
</body>
</html>
For the same URL https://example.com:8080/path/to/page.html, location.hostname returns "example.com".
Side-by-Side Comparison Example
<!DOCTYPE html>
<html>
<head>
<title>Host vs Hostname Comparison</title>
</head>
<body>
<h3>Comparing location.host and location.hostname</h3>
<div id="comparison"></div>
<script>
const comparisonDiv = document.getElementById('comparison');
comparisonDiv.innerHTML = `
<p><strong>Current URL:</strong> ${location.href}</p>
<p><strong>location.host:</strong> ${location.host}</p>
<p><strong>location.hostname:</strong> ${location.hostname}</p>
<p><strong>location.port:</strong> ${location.port || 'default'}</p>
`;
// Log to console for clarity
console.log("Complete comparison:");
console.log("host:", location.host);
console.log("hostname:", location.hostname);
console.log("port:", location.port);
</script>
</body>
</html>
Key Differences
| Property | Includes Port | Example Output | Use Case |
|---|---|---|---|
location.host |
Yes | example.com:8080 | When port matters |
location.hostname |
No | example.com | Domain name only |
When to Use Each
Use location.hostname when:
- You only need the domain name
- Building domain-based logic
- Comparing domains across different ports
Use location.host when:
- Port information is crucial
- Constructing complete URLs
- API endpoints that require specific ports
Practical Example: Domain Validation
<!DOCTYPE html>
<html>
<head>
<title>Domain Validation Example</title>
</head>
<body>
<h3>Domain Validation Demo</h3>
<div id="validation-result"></div>
<script>
function validateDomain() {
const allowedDomains = ['example.com', 'test.com', 'localhost'];
// Use hostname for domain checking (ignores port)
const currentDomain = location.hostname;
const isAllowed = allowedDomains.includes(currentDomain);
return {
domain: currentDomain,
host: location.host,
isAllowed: isAllowed
};
}
const result = validateDomain();
document.getElementById('validation-result').innerHTML = `
<p>Current hostname: ${result.domain}</p>
<p>Current host: ${result.host}</p>
<p>Domain allowed: ${result.isAllowed}</p>
`;
console.log("Validation result:", result);
</script>
</body>
</html>
Conclusion
Use location.hostname when you need only the domain name, and location.host when port information is important. For most domain-based operations, hostname is preferred as it provides cleaner, port-independent comparisons.
4K+ Views
