How to get the current URL with JavaScript?

JavascriptWeb DevelopmentFront End Technology

The window.location object can be used to get the current URL.

  • window.location.href property returns the href (URL) of the current page. We could also use window.location or location in place of window.location.href.

We could also use document.documentURI and document.URL properties.

  • document.documentURI returns the location of the document as a string.

  • document.URL returns the URL of the document as a string.

Let’s understand how to get the current URL with JavaScript using the above properties with the help of program examples.

Example 1 − Using window.location.href property.

In this example we use window.location.href to get the current URL. In below example you can try using window.location or location in place of window.location.href.

<html>
   <body>
      <div>
         <p id ="dd"></p>
      </div>
      <script type="text/javascript">
         var iid=document.getElementById("dd");
         alert(window.location.href);
         iid.innerHTML = "URL is " + window.location.href;
      </script>
   </body>
</html>

Output

We execute the code online. When you run the above code, an alert message showing the current URL of the page is displayed. And also, the browser will display the current URL of the page.

URL is https://tpcg1.tutorialspoint.com/root/84804/index.htm?v=1

The above URL is the location address of the hello.html file. Depending on where you saved your hello.html file, you may get a different URL. You may also get a different URL type when running the program locally.

When you run the program locally, you may get the current URL something similar to the below -

URL is file:///D:/JavaScript/index.html

I saved the index.html file in the directory D:/JavaScript.

Example 2 − Using document.documentURI

In this example, we use the document.documentURI to get the current URL of the document.

<html>
   <body>
      <div>
         <p id ="dd"></p>
      </div>
      <script type="text/javascript">
         var iid=document.getElementById("dd");
         alert(document.documentURI);
         iid.innerHTML = "URL is " + document.documentURI;
      </script>
   </body>
</html>

Output

We execute the code online. When you execute the above code, an alert message showing the current URL of the document is displayed. And also, the browser will display the current URL of the document.

URL is https://tpcg1.tutorialspoint.com/root/59223/index.htm?v=1

Same as in Example 1, the above URL is the location address of the hello.html file. Depending on where you saved your hello.html file, you may get a different URL. You may also get a different URL type when running the code locally.

Example 3 − Using document.URL

In this example, we use the document.URL to get the current URL of the document.

<html>
   <body>
      <div>
         <p id ="dd"></p>
      </div>
      <script type="text/javascript">
         var iid=document.getElementById("dd");
         alert(document.URL);
         iid.innerHTML = "URL is " + document.URL;
      </script>
   </body>
</html>

Output

When you execute the above code, an alert message showing the current URL of the document is displayed. And also the browser will display the current URL.

URL is https://tpcg1.tutorialspoint.com/root/24466/index.htm?v=1
raja
Updated on 20-Apr-2022 12:12:57

Advertisements