This article will describe the methods for modifying the URL without reloading the web page using JavaScript.
How to Modify/Change the URL in JavaScript Without Reloading the Page?
To modify the URL without reloading the web page, use the following JavaScript predefined method:
Method 1: Modify the URL in JavaScript Without Reloading the Page Using “pushState()” Method
To modify the URL without reloading the web page, use the “pushState()” method. It is a feature or the predefined method of the “history Object” that allows changing the browser history without navigating or refreshing the page. It just adds or modifies the history stack and does not load a new page. By using this approach, you can switch back and forth between the pages by adding a new entry to the history stack of the browser.
Syntax
Follow the given syntax for the “pushState()” method:
Here:
- “state” represents the new history entry.
- “title” is the particular text which can be shown at the title bar of the browser.
- “url” indicates the replaced URL as a new entry.
Example
In an HTML file, create four buttons that call the “modifyUrl()” function on the button click:
<button onclick="modifyUrl('CSS Tutorial', 'CSSTutorial.html');">2</button>
<button onclick="modifyUrl('JavaScript Tutorial', 'JavaScriptTutorial.html');">3</button>
<button onclick="modifyUrl('Java Tutorial', 'JavaTutorial.html');">4</button>
Define a function “modifyUrl()” in a JavaScript file that will trigger on the button click. It takes two parameters, the “title” and the “url”. When the method is called on the button click, the “title” and the “url” will be passed as arguments. Check the type of the “pushState” of the history object, if it is not “undefined”. Then, call the “history.pushState()” method to change the URL:
if (typeof (history.pushState) != "undefined") {
var obj = {
Title: title,
Url: url
};
history.pushState(obj, obj.Title, obj.Url);
}
}
It can be seen that on every button click, the URL will successfully be changed without reloading the page:
In the above output, you can see that the back arrow button on the top left (<-) is enabled while clicking on the button, it indicates that you can navigate back and forth because the “pushState()” method adds the new URL on the history stack.
Method 2: Modify the URL in JavaScript Without Reloading the Page Using the “replaceState()” Method
Use the “replaceState()” method for modifying the URL without reloading the web page. It is also a feature of the “history Object” but it will not add a new entry to the history stack. It changes the existing state of the browser’s history and replaces it with a new state. By using this approach, you cannot switch back and forth between the pages.
Syntax
The given syntax is utilized for the “replaceState()” method:
Example
In the defined function, call the “replaceState()” method to replace the URL on the button click without reloading or navigating the page:
if (typeof (history.replaceState) != "undefined") {
var obj = {
Title: title,
Url: url
};
history.replaceState(obj, obj.Title, obj.Url);
}
}
The output indicates that on every button’s click, the URL has been changed and there is no option to navigate to go back as the back arrow button is disabled:
We have provided all the essential information relevant to the modification of the URL without reloading the page in JavaScript.
Conclusion
To modify/change the URL without refreshing the web page, use the “pushState()” method or the “replaceState()” method. “pushState()” method adds the new URL as a new entry in a history stack and allows users to navigate back and forth. While the “replaceState()” method replaces the URL and does not allow moving to the back page. This article described the methods for modifying the URL without reloading the web page using JavaScript.
