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
How to get the number of the internet host port for the current page in JavaScript?
In this tutorial, we will learn to get the number of internet host port for the current page in JavaScript.
The Port number is a 16-bit unique identifier used by network protocols. Port numbers range from 0-65535 and help servers identify specific processes or services. Each port number has its own identity and purpose in network communication.
Following are the methods by which we can get the port number of the internet host:
- Using the location.port Property
- Using the URL interface
Using the location.port Property
The Location interface provides access to the URL of the current page. Both Window and Document objects can access this interface. The location.port property returns the port number of the current URL.
Syntax
// Get port number var port_number = location.port;
Example
In the below example, we use the location.port property to get the port number in JavaScript.
<html>
<body>
<h3>Use <i>location.port</i> to get a port number using JavaScript.</h3>
<button id="btn">Get Port</button>
<p id="para"></p>
<p><b>Note:</b> If the port number is default (80 for http and 443 for https), most browsers will display nothing.</p>
<script>
var port_number = location.port;
document.getElementById("btn").addEventListener("click", getport);
function getport() {
document.getElementById("para").innerHTML = "Port Number of the page: " + port_number;
}
</script>
</body>
</html>
In this example, we store the port number using location.port and display it when the button is clicked. If no explicit port is specified in the URL, the property returns an empty string for default ports.
Using the URL Interface
The URL interface is used to parse and manipulate URLs. It provides various properties to access different parts of a URL, including the port property.
Syntax
var url = new URL(window.location.href); var port_number = url.port;
Example
In the below example, we use the URL interface to get the port number of the current page.
<html>
<body>
<h3>Use <i>URL interface</i> to get a port number using JavaScript.</h3>
<button id="btn">Get Port</button>
<p id="para"></p>
<p><b>Note:</b> If the port number is default (80 for http and 443 for https), most browsers will display nothing.</p>
<script>
var url = new URL(window.location.href);
var port_number = url.port;
document.getElementById("btn").addEventListener("click", getport);
function getport() {
document.getElementById("para").innerHTML = "Port Number of the page: " + port_number;
}
</script>
</body>
</html>
This approach creates a new URL object from the current page's URL and then accesses its port property. Both methods achieve the same result with slightly different syntax.
Comparison
| Method | Syntax | Browser Support |
|---|---|---|
location.port |
Direct property access | All browsers |
| URL interface | Object-based approach | Modern browsers |
Key Points
- Default ports (80 for HTTP, 443 for HTTPS) typically return empty strings
- Both methods work only in browser environments, not in Node.js
- The URL interface provides more flexibility for URL manipulation
-
location.portis simpler and has wider browser support
Conclusion
Both location.port and the URL interface provide simple ways to get the current page's port number. Use location.port for direct access or the URL interface when you need additional URL parsing capabilities.
794 Views
