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 protocol and page path of the current web page in JavaScript?
In JavaScript, you can retrieve both the protocol (like https:// or http://) and the page path of the current webpage using the window.location object and URL constructor. These properties are essential for web development tasks like URL manipulation and navigation.
Getting the Protocol
The protocol specifies the data transfer method used by the URL. Use window.location.protocol or URL.protocol to retrieve it.
Syntax
protocol = window.location.protocol; // or protocol = new URL(url).protocol;
Using window.location.protocol
<!DOCTYPE html>
<html>
<head>
<title>Protocol Example</title>
</head>
<body>
<div id="result"></div>
<script>
const protocol = window.location.protocol;
document.getElementById("result").innerHTML = "Protocol: " + protocol;
</script>
</body>
</html>
Protocol: https:
Using URL Constructor
<!DOCTYPE html>
<html>
<head>
<title>URL Protocol Example</title>
</head>
<body>
<p>Protocol is: <span class="protocol"></span></p>
<button onclick="getProtocol()">Get Protocol</button>
<script>
function getProtocol() {
const currentUrl = window.location.href;
const urlObject = new URL(currentUrl);
const protocol = urlObject.protocol;
document.querySelector('.protocol').textContent = protocol;
}
</script>
</body>
</html>
Protocol is: https:
Getting the Page Path
The pathname represents the path portion of the URL after the domain. Use window.location.pathname to retrieve the current page path.
Getting Complete URL
<!DOCTYPE html>
<html>
<head>
<title>Current URL Example</title>
</head>
<body>
<div id="result"></div>
<script>
const currentURL = window.location.href;
document.getElementById("result").innerHTML = "Current URL: " + currentURL;
</script>
</body>
</html>
Current URL: https://example.com/path/to/page.html
Getting Only the Pathname
<!DOCTYPE html>
<html>
<head>
<title>Pathname Example</title>
</head>
<body>
<div id="result"></div>
<script>
const pathname = window.location.pathname;
document.getElementById("result").innerHTML = "Current path: " + pathname;
</script>
</body>
</html>
Current path: /tutorials/javascript/page.html
Comparison of Methods
| Property | Returns | Example Output |
|---|---|---|
window.location.protocol |
Protocol with colon | https: |
window.location.pathname |
Path only | /tutorials/javascript |
window.location.href |
Complete URL | https://example.com/page.html |
Common Use Cases
These properties are commonly used for:
- URL validation and manipulation
- Dynamic navigation based on current location
- Building relative URLs
- Analytics and tracking implementations
Conclusion
Use window.location.protocol to get the protocol and window.location.pathname for the page path. These properties provide reliable access to URL components for various web development tasks.
798 Views
