Get URL information in JavaScript - ProgrammerTech


Get URL information in JavaScript

  • Share this:
Get URL information in JavaScript

Get URL information JavaScript

Obtaining URL information, we will explain in this lesson about location. We will start with location.protocol, if we use this property it will return the outbound protocol of the link. Since we are currently using a local server that will not show us correctly and the protocol is either http or https, you can search in Google for the meaning of the http and https protocols.


Properties used with location in JavaScript

  1. location.protocol.
  2. location.href.
  3. location.hostname.
  4. location.pathname.
  5. location.reload.
  6. location.assign.
  7. location.replace.



We can find out the protocol used in web pages with the location.protocol command, whether the site is on a local or external server.

var protocl = location.protocol;

We created a variable and assigned it that we want to know the protocol for the current page, and displayed the data via alert. Executing the above code here will give us file: because we are browsing this through the local server. If we want him to display the protocol for a site, for example, we use our site and test it by opening the developer tools Inspect and going to the console and typing the following command


Immediately, in the pop-up window, it will give us the word https, which is the protocol used with this page.




command location.href If we want to display the link to the location we are in at the moment we can use the command location.href . For example, let's try on our site. We use the command:


When you run the code, it will give us a link to the site via a popup dialer.




The location.hostname command, through which we can display the hostname of the site or the domain of the site we want to display.


We created a popup and asked it to show us the domain name of the site we're currently on.



The previous image shows us that he showed us the domain used on this site when writing the command to him.



With the location.pathname command, we can know where we are currently standing, or the current path we are on.



We noticed that he showed us the path of the section you are in. We will benefit from these matters when entering deeply into the world of web design, and we will need them to know the current site, for example, or to center pages...etc.



location.reload is used to refresh the page, for example, we link it to an image in the html file, and when you click on it, it refreshes the current page. And when you type this command in the console of a webpage and when you hit the Enter button, it will refresh the page.


Here, when you hit the Enter button, it will immediately refresh the page.



location.assign command is used to take the user to a second page that is specified while preserving their current page. Who is in it in case he decides to return to the page without losing its information. If we write this command in the console of a site.


As we noticed, when typing the command and pressing Enter, it took us to the location we specified, with the return arrow remaining on the previous page.



location.replace command This command replaces the current page with a new page that we specify and it is no longer possible to return to the current page because it has been replaced by us, for example if we type this command.


When you press Enter, it will take us to the desired site, and it is not possible to go back, that is, the previous page will be permanently deleted.

Muhammad Alush

Muhammad Alush

إسمي محمد تركي العلوش من سورية من ريف حلب الشرقي 1994, محب للتقنية و التعلم الذاتي, و جميع خبراتي تعلمتها ذاتياً, و اللغات البرمجية التي أتقنها هي html, css, javascript, php, c, python بالإضافة إلى حبي الكبير لمجال الشبكات.