The protocol, domain, and port of the current page can be found by two methods:
Method 1: Using location.protocol, location.hostname, location.port methods: The location interface has various methods that can be used to return the required properties.
- The location.protocol property is used to return the protocol scheme of the URL along with the final colon(:).
- The location.hostname is used to return the domain name of the URL.
- The location.port property is used to return the port of the URL. It returns nothing if the port is not described explicitly in the URL.
Syntax:
protocol = location.protocol;
domain = location.hostname;
port = location.port;
Example:
<!DOCTYPE html>
<html>
<head>
<title>
Get protocol, domain, and port from URL
</title>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
Get protocol, domain, and port from URL
</b>
<p>
Protocol is:
<span class="protocol"></span>
</p>
<p>
Domain is:
<span class="domain"></span>
</p>
<p>
Port is:
<span class="port"></span>
</p>
<button onclick="getDetails()">
Get protocol, domain, port
</button>
<script type="text/javascript">
function getDetails() {
protocol = location.protocol;
domain = location.hostname;
port = location.port;
document.querySelector('.protocol').textContent
= protocol;
document.querySelector('.domain').textContent
= domain;
document.querySelector('.port').textContent
= port;
}
</script>
</body>
</html>
|
Output:
- Before Clicking the button:
- After Clicking the button:
Method 2: Using the URL interface: The URL interface is used to represent object URL. It can be used for getting the port, domain, and protocol as it has inbuilt methods to get these values.
- The url.protocol property is used to return the protocol scheme of the URL along with the final colon(:).
- The url.hostname is used to return the domain of the URL.
- The url.port property is used to return the port of the URL. It returns ” if the port is not described explicitly.
Note: This API is not supported in Internet Explorer 11.
Syntax:
current_url = window.location.href;
url_object = new URL(current_url);
protocol = url_object.protocol;
domain = url_object.hostname;
port = url_object.port;
Example:
<!DOCTYPE html>
<html>
<head>
<title>
Get protocol, domain, and port from URL
</title>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
Get protocol, domain, and port from URL
</b>
<p>Protocol is: <span class="protocol"></span></p>
<p>Domain is: <span class="domain"></span></p>
<p>Port is: <span class="port"></span></p>
<button onclick="getDetails()">
Get protocol, domain, port
</button>
<script type="text/javascript">
function getDetails() {
current_url = window.location.href;
url_object = new URL(current_url);
protocol = url_object.protocol;
domain = url_object.hostname;
port = url_object.port;
document.querySelector('.protocol').textContent
= protocol;
document.querySelector('.domain').textContent
= domain;
document.querySelector('.port').textContent
= port;
}
</script>
</body>
</html>
|
Output:
- Before Clicking the button:
- After Clicking the button: