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 return the protocol (http or https) of the web page with JavaScript?
In this tutorial, we will look at how to find which protocol is being used by a web page. A web page mostly uses http or https protocol. A protocol is a type of standard which is used to specify how the data is transferred or transmitted between different sets of computers.
HTTP ? HTTP is a protocol for retrieving resources such as HTML pages. It is one of the most essential and the backbone for all types of data exchange that happens over the internet. HTTP is a client-server protocol which means that all the requests are done by the client which are mostly Web browsers. A full document is constructed by many sub-documents such as text, photos, videos, scripts and others.
HTTPS ? HTTPS or Hyper Text Transfer Protocol Secure is an encrypted variant of the HTTP protocol. All communication between a client and a server is encrypted using SSL or TLS. This secure connection enables clients to communicate sensitive data with a server in a secure manner, such as while banking or buying online.
We shall use window.location.protocol or url.protocol to get the protocol that is being used by the page or the URL that has been specified. It will return protocols such as:
HTTP
HTTPS
FTP
MAILTO
FILE
Syntax
To return the protocol of the current page:
window.location.protocol
To return the protocol of some other page or URL:
url = new URL("https://www.example.com/")
proto = url.protocol
Return Value
It returns a string containing the protocol that is currently being used by the webpage or the URL. The protocol includes the colon (":") at the end.
For example, https://www.tutorialspoint.com/ will return "https:"
whereas, http://www.columbia.edu/~fdc/sample.html will return "http:"
Example 1: Current Page Protocol
<!DOCTYPE html>
<html>
<body>
<h3>Current Page Protocol</h3>
<p id="result"></p>
<script>
document.getElementById("result").innerHTML =
"The protocol is: " + window.location.protocol;
</script>
</body>
</html>
The protocol is: https:
Example 2: HTTP URL Protocol
<!DOCTYPE html>
<html>
<body>
<h3>HTTP URL Protocol</h3>
<p id="result"></p>
<script>
let url_object = new URL("http://www.columbia.edu/~fdc/sample.html");
document.getElementById("result").innerHTML =
"The protocol is: " + url_object.protocol;
</script>
</body>
</html>
The protocol is: http:
Example 3: Mailto Protocol
<!DOCTYPE html>
<html>
<body>
<h3>Mailto Protocol</h3>
<p id="result"></p>
<script>
let url_object = new URL("mailto:xyz@gmail.com");
document.getElementById("result").innerHTML =
"The protocol is: " + url_object.protocol;
</script>
</body>
</html>
The protocol is: mailto:
Key Points
window.location ? The window.location object is used to retrieve the current page address (URL) and can also be used to redirect the browser to a different page.
URL Constructor ? The URL() constructor creates a URL object that allows you to parse and extract information from any URL string, including the protocol.
Comparison
| Method | Use Case | Returns |
|---|---|---|
window.location.protocol |
Current page protocol | Protocol with colon (e.g., "https:") |
new URL(url).protocol |
Any URL protocol | Protocol with colon (e.g., "http:") |
Conclusion
Use window.location.protocol to get the current page's protocol, or new URL(url).protocol for any URL. Both methods return the protocol with a colon suffix, making it easy to identify HTTP, HTTPS, or other protocols in your web applications.
1K+ Views
