Skip to content
Related Articles

Related Articles

How to Display Changed Browser URL Without Reloading Through alert using JavaScript ?

View Discussion
Improve Article
Save Article
  • Last Updated : 30 Jan, 2020
View Discussion
Improve Article
Save Article

To change the URL in the browser without loading the new page, we can use history.pushState() method and replaceState() method from JavaScript. To display the browser-URL before changing the URL we will use window.location.href in the alert() function and will use again after changing the browsers-URL.

Note: The history.pushState() method combines HTML 5 History and JavaScript pushState() method.

Syntax:

alert(" Message:" + window.location.hrf);

Below examples illustrate the above approach:

Example 1:




<!DOCTYPE html>
<html>
  
<head>
    <script type="text/javascript">
        function geeks() {
            alert("The current URL of this"
            + " page is: " + window.location.href);
        }
  
        function change_url() {
            window.history.pushState("stateObj",
                 "new page", "changedURL.html");
              
            alert("The URL of this page is: "
                    + window.location.href);
        }
    </script>
</head>
  
<body onload="geeks()">
    <a href="javascript:change_url()">
        Click to change url
    </a>
</body>
  
</html>

Output:

Example 2:




<!DOCTYPE html>
<html>
  
<head>
    <script type="text/javascript">
        function geeks() {
            alert("The current URL of this "
            + "page is: " + window.location.href);
        }
  
        function change_url() {
            window.history.replaceState("stateObj",
                    "new page", "changedURL.html");
              
            alert("The URL of this page is: "
                    + window.location.href);
        }
    </script>
</head>
  
<body onload="geeks()">
    <a href="javascript:change_url()">
        Click to change url
    </a>
</body>
  
</html>

Output:


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!