[Solved - 10 Answers] JAVASCRIPT - How to get current URL in JavaScript - Learn in 30 Sec from Microsoft Awarded MVP

PROBLEM:

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

SOLUTION 1:

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

SOLUTION 2:

In jQuery style:

javascript code

$(location).attr('href');

The location object also has other properties, like host, hash, protocol, and pathname.

SOLUTION 3:

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>

SOLUTION 4:

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

SOLUTION 5:

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>

SOLUTION 6:

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));
}

SOLUTION 7:

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

SOLUTION 8:

javascript code

var currentURL = window.location.href;

SOLUTION 9:

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;

SOLUTION 10:

This will return the absolute URL of the current page using JavaScript/jQuery.

READ JAVA SCRIPT- How to remove a property from a JavaScript object

javascript code

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

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

About the author

Venkatesan Prabu

Add Comment

Cancel reply

You may also like

Construct For Loops in JavaScript

Define Functions in JavaScript

Understanding Date and Time in JavaScript

About the author

Venkatesan Prabu

Add Comment

Cancel reply

Popular Tags