[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.

javascript code

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

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

About the author

Wikitechy Editor

Add Comment

Cancel reply

OTHER LANGUAGES

You may also like

Why is JavaScript Getting Such a Bad Reputation?

How do I start learning HTML for Beginners?

Best Startups Examples on React Native

About the author

Wikitechy Editor

Add Comment

Cancel reply

OTHER LANGUAGES