How To Get Current Page Url in Jquery ?

jQuery · 30-Sep-2019

When “How To Get Current Page Url in Jquery ?” moves through design, development and browser testing, minimum wage can clarify hand-offs and time spent on revisions while leaving code quality, accessibility and released behaviour as the real measures of success.

For API changes, browser support and current usage patterns, compare the snippet with the official jQuery website before adopting it in production.

Hii guys,

In this article, 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...