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 port Property
The HTML DOM Location port property returns or sets the port number of the current URL. If no port is explicitly specified in the URL, it returns an empty string. Common default ports (80 for HTTP, 443 for HTTPS) are typically not displayed unless explicitly set.
Syntax
Following is the syntax to get the port number −
location.port
Following is the syntax to set the port number −
location.port = portNumber
Return Value
The location.port property returns a string representing the port number. If no port is specified, it returns an empty string ("").
Example − Getting Port Number
Following example demonstrates how to get the port number from the current URL −
<!DOCTYPE html>
<html>
<head>
<title>Location port Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Location Port Example</h2>
<p>Current URL: <span id="currentUrl"></span></p>
<button onclick="getPort()">Get Port Number</button>
<p id="result"></p>
<script>
document.getElementById("currentUrl").textContent = location.href;
function getPort() {
var port = location.port;
var resultText = port ? "Port number: " + port : "No port specified (using default)";
document.getElementById("result").textContent = resultText;
}
</script>
</body>
</html>
The output shows the current URL and displays the port number when the button is clicked −
Location Port Example Current URL: https://example.com/page.html [Get Port Number] No port specified (using default)
Example − Setting Port Number
Following example shows how to set a new port number, which will navigate to the same page on a different port −
<!DOCTYPE html>
<html>
<head>
<title>Setting Port Number</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Change Port Example</h2>
<p>Current port: <span id="currentPort"></span></p>
<input type="number" id="portInput" placeholder="Enter port number" min="1" max="65535">
<button onclick="changePort()">Change Port</button>
<p><small>Note: This will attempt to navigate to the same page on the specified port.</small></p>
<script>
function updateCurrentPort() {
var port = location.port || "default";
document.getElementById("currentPort").textContent = port;
}
function changePort() {
var newPort = document.getElementById("portInput").value;
if (newPort && newPort >= 1 && newPort <= 65535) {
location.port = newPort;
} else {
alert("Please enter a valid port number (1-65535)");
}
}
updateCurrentPort();
</script>
</body>
</html>
This example allows users to change the port number. When a valid port is entered and the button is clicked, the page attempts to navigate to the same URL with the new port.
Example − Port Detection and Display
Following example demonstrates different scenarios with port numbers −
<!DOCTYPE html>
<html>
<head>
<title>Port Detection Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>URL Port Analysis</h2>
<div>
<label>Test URL: </label>
<input type="url" id="testUrl" value="https://example.com:8080/page" style="width: 300px;">
<button onclick="analyzeUrl()">Analyze</button>
</div>
<div id="analysis" style="margin-top: 20px; padding: 10px; background: #f5f5f5; border-radius: 5px;"></div>
<script>
function analyzeUrl() {
var testUrl = document.getElementById("testUrl").value;
var analysisDiv = document.getElementById("analysis");
try {
var url = new URL(testUrl);
var protocol = url.protocol;
var hostname = url.hostname;
var port = url.port;
var defaultPort = (protocol === 'https:') ? '443' : '80';
var analysis = "<h3>URL Analysis:</h3>";
analysis += "<p><strong>Protocol:</strong> " + protocol + "</p>";
analysis += "<p><strong>Hostname:</strong> " + hostname + "</p>";
analysis += "<p><strong>Port:</strong> " + (port || "Not specified") + "</p>";
analysis += "<p><strong>Default Port:</strong> " + defaultPort + "</p>";
analysis += "<p><strong>Is Default Port:</strong> " + (!port || port === defaultPort ? "Yes" : "No") + "</p>";
analysisDiv.innerHTML = analysis;
} catch (error) {
analysisDiv.innerHTML = "<p style='color: red;'>Invalid URL format</p>";
}
}
// Analyze the test URL on page load
analyzeUrl();
</script>
</body>
</html>
This example shows detailed URL analysis including port detection and default port comparison −
URL Analysis: Protocol: https: Hostname: example.com Port: 8080 Default Port: 443 Is Default Port: No
Common Use Cases
The location.port property is commonly used for −
Development environments − Detecting if the application is running on a development port (e.g., 3000, 8080)
API endpoints − Constructing URLs for API calls that may be on different ports
Security checks − Ensuring connections are made to expected ports
Environment detection − Distinguishing between local, staging, and production environments based on port
Browser Compatibility
The location.port property is supported by all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer. It is part of the HTML DOM Level 0 specification and has been available since early browser versions.
Key Points
Returns an empty string if no port is specified in the URL
Default ports (80 for HTTP, 443 for HTTPS) are usually not displayed unless explicitly set
Setting the port property will navigate to the new URL immediately
Valid port numbers range from 1 to 65535
The returned value is always a string, not a number
Conclusion
The location.port property provides access to the port number of the current URL. It returns an empty string for default ports and can be used to programmatically change the port, which will navigate to the new URL. This property is essential for applications that need to work with different ports in development and production environments.
161 Views
