How To Get Current Page Url in Jquery ?

Share Me
  •  
  •  
  •  
  • 1
  •  
  •  
  •  
  •  
  •  
  •  
  •  
    1
    Share
How To Get Current Page Url in Jquery

Hello Dev’s,Today in this article, I will teach you how to get the current page url by using jquery.

At most cases while we are working with JavaScript, then sometimes we need to get current URL with or without query by string.

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

So we may need catch current URL at the time of redirection or we can perform so many other task with the current URL.

Solution 1

First Solution by 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>

It return alert in show current page URL

Solution 2

Our Second Solution by 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> 

it will return alert in show current page URL

Solution 3

Our 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>                            

It will return alert in show current page URL

Solution 4

Next Solution is by 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>                            

It return alert in show current page URL

Read Also : How to Implement Chartjs in Laravel?

Thanks for read. I hope it help you. For more you can follow us on facebook.

About Shahriar Sagor

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by Shahriar Sagor →