How to get current URL with JavaScript?

window.location.href

JavaScript offers multiple methods to interact with the current URL displayed in the web browser's address bar. These methods are facilitated through the Location object, which is a property of the Window object. You can utilize the Location object's properties to acquire information about the current page's address or employ its methods to perform actions like redirecting or refreshing the page. This provides developers with a versatile toolkit for managing and interacting with the browser's URL.

run this source code Browser View

URL of this page is:

Get current url | Full Source | javascript
<!DOCTYPE html> <html> <body> <p id="href">URL of this page is:</p> <script type="text/javascript"> function getURL() { document.getElementById("href").innerHTML = "URL of this page is:<br>" + window.location.href; } </script> <form id="b"> <input type="button" id="two" onclick="getURL()" value="Get URL of this page" /> </form> </body> </html>

URL structure

URL's are also called links. It is an address on the internet. It's made up of a protocol , domain name, and a path.

<protocol>//<hostname>:<port>/<pathname><search><hash>

Get Current URL and Components with JavaScript (Protocol, Domain, Port, Path, Query, Hash)

JavaScript window.location properties

Using these window.location object properties you can access all of these URL components and what they can set or return:

  1. href - Full URL (http://www.example.com:8082/index.php#tab2)
  2. protocol - Protocol Schema (http: or https)
  3. host - Domain name + port (www.example.com:8082)
  4. hostname - Domain name (www.example.com)
  5. port - Port Number (8082)
  6. pathname - the path name of the URL (index.php)
  7. search - ? followed by Query String (?foo=789)
  8. hash - # followed by the Anchor or Fragment identifier (#tab2)
run this source code Browser View

window.location properties in javascript

window.location properties| FullSource | JavaScript
<!DOCTYPE html> <html> <body> <h2>window.location properties in javascript</h2> <p id="href"></p> <p id="protocol"></p> <p id="host"></p> <p id="hostname"></p> <p id="port"></p> <p id="pathname"></p> <p id="search"></p> <p id="hash"></p> <script type="text/javascript"> function getURLProperties() { document.getElementById("href").innerHTML = "URL of this page is:<br>" + window.location.href; document.getElementById("protocol").innerHTML = "Protocol of this page is:<br>" + window.location.protocol; document.getElementById("host").innerHTML = "Host of this page is:<br>" + window.location.host; document.getElementById("hostname").innerHTML = "Hostname of this page is:<br>" + window.location.hostname; document.getElementById("port").innerHTML = "Port of this page is:<br>" + window.location.port; document.getElementById("pathname").innerHTML = "Pathname of this page is:<br>" + window.location.pathname; document.getElementById("search").innerHTML = "Search of this page is:<br>" + window.location.search; document.getElementById("hash").innerHTML = "Hash of this page is:<br>" + window.location.hash; } </script> <form id="d"> <input type="button" id="four" onclick="getURLProperties()" value="Get URL Properties of this page" /> </form> </body> </html>

Conclusion

To retrieve the current URL using JavaScript, utilize the window.location.href property. This provides a straightforward way to access and utilize the URL of the current webpage in your scripts.






Related Topics
  1. JavaScript Popup Boxes
  2. Opening a new window in JavaScript
  3. How to Create Drop-Down Lists in JavaScript
  4. How do I include a JavaScript file in another JavaScript file?
  1. Print the content of a Div using JavaScript/jQuery
  2. How to Detect a Mobile Device with JavaScript/jQuery
  3. How to validate an email address in JavaScript
  4. JavaScript Array Iteration
  5. How to Remove a Specific Item from an Array in JavaScript
  6. What is JavaScript closures?
  7. How To Remove a Property from a JavaScript Object
  8. How to get selected value from Dropdown list in JavaScript
  9. How do I get the current date in JavaScript?
  10. How to Open URL in New Tab | JavaScript
  11. How to delay/wait/Sleep in code execution | JavaScript
  12. How to round to at most 2 decimal places | JavaScript
  13. How to convert string to boolean | JavaScript
  14. How to check undefined in JavaScript?
  15. How To Copy to Clipboard | JavaScript
  16. How to encode a URL using JavaScript?
  17. How to force Input field to enter numbers only | JavaScript
  18. How to create multiline string in JavaScript
  19. How to Check for an Empty String in JavaScript?