How to get the protocol and page path of the current web page in JavaScript?

2022-12-19 21:56:00 人气: 9

Protocol The URL segment that specifies the data transfer protocol to be utilised is referred to as the protocol of a URL. In this example, https:// indicates for the HTTPS protocol. We will learn how to obtain the website URL for the currently seen webpa...

Protocol

The URL segment that specifies the data transfer protocol to be utilised is referred to as the protocol of a URL. In this example, https:// indicates for the HTTPS protocol.

We will learn how to obtain the website URL for the currently seen webpage or website in this article. The 'URL' property of the Document object, which has data on the current URL, is used to get the current URL. The "URL" property returns a string that includes the complete address of the currently seen page as well as the HTTP protocol, such as (http://).

Syntax

Following is the syntax of protocol method

protocol = location.protocol;

Example 1

In this example let us understand how the location.protocol property is used to return the protocol scheme of the URL along with the final colon(:).The protocol used against the current URL is returned mostly by window.location.protocol property −

<!DOCTYPE html> <html> <title>How to get the protocol and page path of the current web page in J**aScript - TutorialsPoint</title> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <div id="result"></div> <script> const webUrl = new URL('https://www.tutorialspoint.com/index.htm'); document.getElementById("result").innerHTML =webUrl.protocol; </script> </body> </html>

Example 2

In this example let us understand how the protocol scheme of the URL is returned together with the last colon(:) using the url.protocol property.

<!DOCTYPE html> <html> <title>How to get the protocol and page path of the current web page in J**aScript - TutorialsPoint</title> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <p>Protocol is: <span class="protocol"></span></p> <button onclick="protDetails()"> Click ME </button> <script type="text/j**ascript"> function protDetails() { current_url = window.location.href; url_object = new URL(current_url); getProtocol = url_object.protocol; document.querySelector('.protocol').textContent = getProtocol; } </script> </body> </html>

Page path of the current web page

The web client wants to access a particular resource on the host server, and the pathname on the host server indicates where to find that resource. The /htdocs directory, for example, serves as the root directory for the apache web server, and anything within may be viewed using its path. The location object, which could be easily accessed by using the window.location, contains all the details about the current URL of the webpage.

In this example, we'll use J**aScript to retrieve the URL of the presently page, which will then be s**ed in a variable. Following that, we'll display the web page's current URL.

The window.location object will return the current web page URL with the help of window.location.href property

Example 3

In this example let us understand how the current URL of the page is stored in the variable "result" in the code below. The HTML content is then set with the innerHTML attribute after selecting the div tag using its ID. We send a variable containing the URL of the currently displayed page to our HTML content.

Run the code on your browser. You will be able to see the current page URL on the web page.

<!DOCTYPE html> <html> <title>How to get the protocol and page path of the current web page in J**aScript - TutorialsPoint</title> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <div id="result"></div> <body> <script type="text/j**ascript"> let getURL = window.location.href; document.getElementById("result").innerHTML = getURL; </script> </body> </html>

Example 4

In this example let us understand how the pathname of the current page can be found by checking the window.location.pathname property.

<!DOCTYPE html> <html> <title>How to get the protocol and page path of the current web page in J**aScript - TutorialsPoint</title> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <div id="result"></div> <body> <script type="text/j**ascript"> document.getElementById("result").innerHTML = "The Current Web page path is: " + window.location.pathname; </script> </body> </html>

In Brief

In J**aScript you can retrieve the URL of the current webpages with the help of window.location.href property as shown in the above example.

Getting the URL of the current page allows you to quickly do whatever activity you desire. In this article, we looked at a few actions we may take after capturing the URL and how to execute the method inside of our J**aScript code to achieve the capabilities.