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

0 1 1 minute read

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:

HTML

<head> 
    <script> 
        function zambiatek() { 
            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="zambiatek()"> 
    <a href="javascript:change_url()"> 
        Click to change url 
    </a> 
</body>

Output:

Example 2:

HTML

<head> 
    <script type="text/javascript"> 
        function zambiatek() { 
            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="zambiatek()"> 
    <a href="javascript:change_url()"> 
        Click to change url 
    </a> 
</body>

Output:

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!