Skip to content
Related Articles

Related Articles

Improve Article

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

  • Last Updated : 30 Jan, 2020

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.

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

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 :