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
HTML DOM Location hostname Property
The Location hostname property is part of the HTML DOM Location object that allows you to get or set the hostname portion of the current URL. The hostname is the domain name part of a URL, excluding the protocol, port number, and path.
Syntax
Following is the syntax to get the hostname property −
location.hostname
Following is the syntax to set the hostname property −
location.hostname = hostname
Return Value
The hostname property returns a string representing the domain name of the URL. For example, if the URL is https://www.tutorialspoint.com:8080/html/index.html, the hostname would be www.tutorialspoint.com.
Getting Current Hostname
The most common use case is retrieving the current page's hostname for conditional logic or display purposes.
Example
Following example demonstrates how to get the current hostname −
<!DOCTYPE html>
<html>
<head>
<title>Location hostname Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Current Page Hostname</h2>
<button onclick="displayHostname()">Get Hostname</button>
<p id="result"></p>
<script>
function displayHostname() {
var hostname = location.hostname;
document.getElementById("result").innerHTML = "Hostname: " + hostname;
}
</script>
</body>
</html>
The output will show the current domain name −
Hostname: www.tutorialspoint.com (or whatever domain the page is hosted on)
Setting Hostname
You can also set the hostname property to navigate to a different domain. However, this will cause the page to navigate to the new URL, and the script execution will stop.
Example
Following example shows how to set a new hostname −
<!DOCTYPE html>
<html>
<head>
<title>Set Hostname Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Navigate to Different Hostname</h2>
<p>Current hostname: <span id="current"></span></p>
<button onclick="changeHostname()">Go to Example.com</button>
<script>
document.getElementById("current").textContent = location.hostname;
function changeHostname() {
// This will navigate to example.com
location.hostname = "example.com";
}
</script>
</body>
</html>
Note: Setting the hostname will trigger navigation to the new domain, so any subsequent code will not execute.
Hostname vs Host vs Origin
Understanding the differences between related Location properties helps in choosing the right one for your needs −
Example − Comparing Location Properties
<!DOCTYPE html>
<html>
<head>
<title>Location Properties Comparison</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Location Properties</h2>
<button onclick="showProperties()">Show All Properties</button>
<div id="output" style="margin-top: 15px; background: #f5f5f5; padding: 10px; border-radius: 5px;"></div>
<script>
function showProperties() {
var output = document.getElementById("output");
output.innerHTML =
"<strong>Full URL:</strong> " + location.href + "<br>" +
"<strong>Hostname:</strong> " + location.hostname + "<br>" +
"<strong>Host:</strong> " + location.host + "<br>" +
"<strong>Origin:</strong> " + location.origin + "<br>" +
"<strong>Protocol:</strong> " + location.protocol;
}
</script>
</body>
</html>
This example demonstrates the difference between hostname, host, and origin properties −
Full URL: https://www.tutorialspoint.com:8080/html/location.html Hostname: www.tutorialspoint.com Host: www.tutorialspoint.com:8080 Origin: https://www.tutorialspoint.com:8080 Protocol: https:
Comparison of Location Properties
| Property | Description | Example Value |
|---|---|---|
hostname |
Domain name only | www.tutorialspoint.com |
host |
Domain name + port number | www.tutorialspoint.com:8080 |
origin |
Protocol + domain + port | https://www.tutorialspoint.com:8080 |
Common Use Cases
The hostname property is commonly used for −
-
Domain validation − Checking if the user is on the correct domain before executing sensitive operations.
-
Conditional content − Displaying different content based on the domain (useful for multi-domain applications).
-
Analytics and tracking − Recording which domain users are visiting your application from.
-
Security checks − Validating that requests are coming from expected domains.
Example − Domain-Based Conditional Logic
<!DOCTYPE html>
<html>
<head>
<title>Conditional Logic Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Environment Detection</h2>
<p id="environment"></p>
<p id="message"></p>
<script>
var hostname = location.hostname;
var envElement = document.getElementById("environment");
var msgElement = document.getElementById("message");
envElement.textContent = "Current hostname: " + hostname;
if (hostname === "localhost" || hostname === "127.0.0.1") {
msgElement.innerHTML = "<strong style='color: orange;'>Development Environment</strong>";
} else if (hostname.includes("staging")) {
msgElement.innerHTML = "<strong style='color: blue;'>Staging Environment</strong>";
} else {
msgElement.innerHTML = "<strong style='color: green;'>Production Environment</strong>";
}
</script>
</body>
</html>
This script detects the environment based on the hostname and displays appropriate messages for development, staging, or production environments.
Conclusion
The location.hostname property provides easy access to the domain name portion of the current URL. It is useful for domain validation, conditional logic, and navigation scenarios. Remember that setting the hostname property will cause the page to navigate to the new domain immediately.
435 Views
