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 host Property
The HTML DOM Location host property returns or sets the hostname and port number of the current URL. This property combines both the hostname (like www.example.com) and port number (like 8080) in the format hostname:port. If no port is specified in the URL, only the hostname is returned.
Syntax
Following is the syntax for getting the host property −
location.host
Following is the syntax for setting the host property −
location.host = "hostname:port"
Return Value
The location.host property returns a string containing the hostname and port number. If the port is the default port for the protocol (80 for HTTP, 443 for HTTPS), it may not be displayed in the returned value.
Example − Getting Current Host
Following example demonstrates how to get the current host information −
<!DOCTYPE html>
<html>
<head>
<title>Location Host Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Current Location Host Information</h2>
<button onclick="showHost()">Get Host</button>
<p id="hostInfo"></p>
<script>
function showHost() {
var currentHost = location.host;
var hostname = location.hostname;
var port = location.port;
document.getElementById("hostInfo").innerHTML =
"Host: " + currentHost + "<br>" +
"Hostname: " + hostname + "<br>" +
"Port: " + (port || "default port");
}
</script>
</body>
</html>
The output shows the current host information when the button is clicked −
Current Location Host Information [Get Host] Host: www.tutorialspoint.com Hostname: www.tutorialspoint.com Port: default port
Example − Detecting Port in Host
Following example shows how to check if a port number is present in the host −
<!DOCTYPE html>
<html>
<head>
<title>Location Host with Port Detection</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Host Port Detection</h2>
<label for="urlInput">Enter URL:</label>
<input type="text" id="urlInput" value="https://www.example.com:8080/page" size="40">
<button onclick="analyzeHost()">Analyze Host</button>
<div id="result" style="margin-top: 15px; padding: 10px; background-color: #f0f0f0;"></div>
<script>
function analyzeHost() {
var url = document.getElementById("urlInput").value;
try {
var urlObj = new URL(url);
var host = urlObj.host;
var hostname = urlObj.hostname;
var port = urlObj.port;
var message = "Full Host: " + host + "<br>";
message += "Hostname: " + hostname + "<br>";
if (port) {
message += "Port Number: " + port + "<br>";
message += "Port is explicitly specified";
} else {
message += "Port: Default port for " + urlObj.protocol + "<br>";
message += "No explicit port specified";
}
document.getElementById("result").innerHTML = message;
} catch (e) {
document.getElementById("result").innerHTML = "Invalid URL format";
}
}
</script>
</body>
</html>
The output analyzes the entered URL and displays host information −
Host Port Detection Enter URL: https://www.example.com:8080/page [Analyze Host] Full Host: www.example.com:8080 Hostname: www.example.com Port Number: 8080 Port is explicitly specified
Example − Setting Host Property
Following example demonstrates how to change the host property (this will navigate to the new location) −
<!DOCTYPE html>
<html>
<head>
<title>Setting Location Host</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Change Location Host</h2>
<p>Current host: <span id="currentHost"></span></p>
<label for="newHost">New Host:</label>
<input type="text" id="newHost" value="www.example.com:3000" size="25">
<button onclick="changeHost()">Change Host</button>
<p style="color: red; font-size: 12px;">Warning: This will navigate away from the current page</p>
<script>
// Display current host
document.getElementById("currentHost").textContent = location.host;
function changeHost() {
var newHostValue = document.getElementById("newHost").value;
if (newHostValue.trim()) {
// This will cause navigation to the new host
location.host = newHostValue;
} else {
alert("Please enter a valid host");
}
}
</script>
</body>
</html>
When the "Change Host" button is clicked, the browser attempts to navigate to the new host specified.
Key Points
-
Default ports − Standard ports (80 for HTTP, 443 for HTTPS) are typically omitted from the host value.
-
Port detection − Use
location.host.includes(':')to check if a port is explicitly specified. -
Setting host − Changing
location.hosttriggers navigation to the new host. -
Related properties − Use
location.hostnamefor hostname only andlocation.portfor port only.
Conclusion
The location.host property provides a convenient way to access or modify the hostname and port of the current URL. It returns the combined hostname and port (when specified), making it useful for URL manipulation and navigation tasks in web applications.
207 Views
