Javascript Code Replace URL No Page Reload

Javascript Code to Replace the URL Query and/or Hash of URL Without Having Reload the Web Page

An example of why you might wish to update a url without having to reload a web page is lets say the web page has links or tabs that display a related div for example and you want the clicking of the different tabs to be stored in the browsers history so when the user clicks the back or forward button, instead of navigating to the previous full url, the browser instead navigates to the previous query part of the url that is stored in the history stack. This results in a more accurate/better user experience.

// Add a new entry to the browser's history stack. // Store the active tab name in the state object (e.g., { tab: "green" }). // Update the URL in the browser's address bar without reloading the page. // The URL will look like "?section=green", "?section=red", etc. history.pushState({ tab: tabName }, "", "?section=" + tabName);

To see in action the javascript code that updates the browser query url in the address bar, click on the different 'tabs' below show greenshow redshow purple and notice how the query string in the browsers address bar changes without the page having to reload.

Explanation:

1. history.pushState(...)
   • This method allows you to modify the browser's history without causing a page reload.
   • It adds a new entry to the browser's session history stack.

2. { tab: tabName } (First Argument)
   • This is the state object. It allows you to store custom data (in this case, { tab: tabName }) associated with the new history entry.
   • Later, when the user navigates back or forward, this data is passed to the window.onpopstate event.
   • In this example:
     • tab is the property name.
     • tabName is the value, which represents the name of the currently active tab (e.g., "green", "red", "purple").

3. "" (Second Argument)
   • This is the title of the new history entry.
   • Although it's included for completeness, modern browsers ignore this argument. You can leave it as an empty string ("") or provide a descriptive title for future compatibility.

4. "?section=" + tabName (Third Argument)
   • This is the URL to display in the browser's address bar.
   • It updates the visible URL to match the new state (e.g., ?section=green or ?section=red) without reloading the page.
   • The actual URL shown in the browser is constructed dynamically:
     • "section=" is a query parameter indicating the current section or tab.
     • tabName is appended to the parameter to reflect the active tab (e.g., green, red, or purple).

The full javascript code for this page:

const arrDivSection = document.querySelectorAll("#section div.inner"), arrLiSection = document.querySelectorAll("#section li.li"); /* ------------------------------------------------------------- The query part of the url for this page with be one of the following urls ... ..?section=green ..?section=red ..?section=purple ------------------------------------------------------------- */ const urlParams = new URLSearchParams(window.location.search), tabFromUrl = urlParams.get("section"); if (tabFromUrl) { showTab(tabFromUrl); // Show the tab from the URL parameter } else { // fallback to 'green' if no type param is provided showTab("green"); } /*--------------------------------------------------------------------- make it so when li item is clicked ... (show green, show red, purple) the appropriate div is shown and the rest hidden -------------------------------------------------------------------- */ arrLiSection.forEach(function (li) { li.addEventListener("click", function (event) { // get the tab name by removing 'li' from the clicked item's ID const tabName = event.currentTarget.id.replace("li", ""); // show the clicked tab showTab(tabName); }); }); /* ------------------------------------------------- unbold ... show green show red show purple and hide all 3 associated div panels ------------------------------------------------ */ function hideAllDivSettings() { arrLiSection.forEach(function(li) { li.classList.remove("bold"); }); arrDivSection.forEach(function(div) { div.classList.add("hide"); }); } /* -------------------------------------------------- hide the current bold tab text "show green", "show red", "show purple" and hide all 3 associated div panels and show the appropriate bold tab text and div ------------------------------------------------ */ function showTab(tabName) { // hide all divs and remove bold from all <li> items hideAllDivSettings(); // show the corresponding tab const li = document.querySelector("#li" + tabName); const div = document.querySelector("#div" + tabName); li.classList.add("bold"); div.classList.remove("hide"); console.log(tabName); // Check if the current state already matches the new state const currentUrlParams = new URLSearchParams(window.location.search); if (currentUrlParams.get("section") !== tabName) { // Update the URL without reloading the page history.pushState({ tab: tabName }, "", "?section=" + tabName); } } /* -------------------------------------------------- window.onpopstate occurs when back/forward browser button clicked. Reflect change in active tab and div showTab(event.state.tab) ------------------------------------------------ */ window.onpopstate = function(event) { if (event.state && event.state.tab) { // show the tab from the history state showTab(event.state.tab); } };