How to Display Changed Browser URL Without Reloading Through alert using JavaScript ?
Last Updated :
24 Jan, 2023
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 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 >
|
Output:
Example 2:
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 >
|
Output:
Share your thoughts in the comments
Please Login to comment...