Jquery Get Current Page Url Tutorial

Hii guys,

Today, I will show you how to get the current page url using jquery.In most cases while working with JavaScript, we sometime need to get current URL with or without query string.

There are so many ways to get the current URL of web page.

You may need current URL at the time of redirection or you can perform so many other task with current URL.

Solution: 1

First Solution Using window.location.href

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

If return alert in show current page URL

Solution: 2

Second Solution Using $(location).attr("href")

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

If return alert in show current page URL

Solution 3

Third Solution Using window.location

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

If return alert in show current page URL

Solution: 4

Fourth Solution Using location.protocol + '//' + location.host + location.pathname

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Get Current Page URL</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("button").click(function(){
            var currentURL=location.protocol + '//' + location.host + location.pathname;
        alert(currentURL);
        });
    });
</script>
</head>
<body>
    <button type="button">Get URL</button>
</body>
</html>

If return alert in show current page URL

It will help you...