HTML • JAVASCRIPT

[Solved – 10 Answers] JAVASCRIPT -HTML – How to get current URL in JavaScript

March 25, 2017
2 Min Read

How to get the path of the current URL and assign it to a variable?

Example URL:

http://localhost/menuname.de?foo=bar&number=0

  • To get the path, we can use:
javascript code 
var pathname = window.location.pathname; // Returns path only
var url      = window.location.href;     // Returns full URL

In jQuery style:

javascript code 
$(location).attr('href');
  • The location object also has other properties, like host, hash, protocol, and pathname.

Property Result
host www.wikitechy.com:8082
hostname www.wikitechy.com
port 8082
protocol http:
pathname index.php
href http://www.wikitechy.com:8082/index.php#tab2
hash #tab2
search ?foo=789

 

javascript code 
var x = $(location).attr('<property>');
  • This will work only if you  have jQuery.

EXAMPLE:

html code 
<html>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js">
</script>
  $(location).attr('href');      // http://www.wikitechy.com:8082/index.php#tab2
  $(location).attr('pathname');  // index.php
</script>
</html>

  • If we need the hash parameters present in the URL, window.location.href may be a better choice.
javascript code 
window.location.pathname
=> /search

window.location.href 
 => www.website.com/search#race_type=1

Get Current Page URL using jQuery:

html code 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Get Current Page URL</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("button").click(function(){
            var pageURL = $(location).attr("href");
            alert(pageURL);
        });
    });
</script>
</head>
<body>
    <button type="button">Get URL</button>
</body>
</html>

jQuery code to get the current web page full URL and store it in a variable for use with other scripts. This is the URL we see in your address bar.

javascript code 
$(document).ready(function() 
{
	//jquery
    $(location).attr('href');

	//pure javascript
	var pathname = window.location.pathname;
	
	// to show it in an alert window
    alert(window.location);
});
  • There is also this function that may help when determining absolute paths.
javascript code 
function getAbsolutePath() 
{
    var loc = window.location;
    var pathName = loc.pathname.substring(0, loc.pathname.lastIndexOf('/') + 1);
    return loc.href.substring(0, loc.href.length - ((loc.pathname + loc.search + loc.hash).length - pathName.length));
}

  • window.location is an object in javascript.

It returns following data:-

javascript code 
window.location.host          #returns host
window.location.hostname      #returns hostname
window.location.path          #return path
window.location.href          #returns full current url
window.location.port          #returns the port
window.location.protocol      #returns the protocol

In jquery we can use the following:

javascript code 
$(location).attr('host');        #returns host
$(location).attr('hostname');    #returns hostname
$(location).attr('path');        #returns path
$(location).attr('href');        #returns href
$(location).attr('port');        #returns port
$(location).attr('protocol');    #returns protocol

javascript code 
var currentURL = window.location.href;

  • If there is someone who wants to concatenate the URL and hash tag, combine two functions:
javascript code 
var pathname = window.location.pathname + document.location.hash;

  • This will return the absolute URL of the current page using JavaScript/jQuery.
READ  [Solved -10 Answers]How to redirect to another webpage in JavaScript/jQuery

 

javascript code 
document.URL
$("*").context.baseURI
location.href
Tags

About the author

View All Posts
Wikitechy Editor

Wikitechy Editor

Wikitechy Founder, Author, International Speaker, and Job Consultant. My role as the CEO of Wikitechy, I help businesses build their next generation digital platforms and help with their product innovation and growth strategy. I'm a frequent speaker at tech conferences and events.

X