jQuery load(), history.pushstate and browser next/prev button-CodePudding

I have a website I'm creating that uses load() in order to serve pages without refresh.

I set it up so that the page changes would modify the url by using window.history.pushState() and I get the pages from the url by using URLSearchParams().

See below for an example of use.

It works fine. See below for an example of use.

One thing that is missing though is when I use the next/previous button of the browser: the url's are indeed updated on each click following the history BUT the website isn't showing the correct page. It still shows me the page I was before using the next/prev button.

How can I do so that the next/prev buttons change the url but also update visually the appropriate page of my website?

Thanks.

// When loading a page from the URL

$(document).ready(function() {
    
    let searchParams = new URLSearchParams(window.location.search)

    if(searchParams.has('page')){ 
        let key = searchParams.get('page');
    }
    else{
        let key = 'home';
    }
            
    $("#container").load("scripts/"   key   ".php",function(){      
        $.getScript("xxxx");
    })  

})

// When loading a page from a website event

function getPage(key){

    $("#container").load("scripts/"   key   ".php",function(){
       
        $.getScript('xxxx');

        /*------------------------------------------------------*/
        const upKey = key.charAt(0).toUpperCase()   key.slice(1);
        const title = upkey;
        const url   = 'index.php?page='   key;
        const state = { 'page': key };
        window.history.pushState(state, title, url)
        /*------------------------------------------------------*/

    });
}

CodePudding user response：

One way to solve this issue is to use the popstate event, which is fired when the user navigates through the browser's history using the back and forward buttons. You can use this event to listen for changes to the URL, and then use the current URL to determine which page to load.

Here's an example of how you could use the popstate event to update your website when the user navigates through the browser's history:

$(document).ready(function() {
  // Listen for the popstate event
  window.addEventListener('popstate', function(event) {
    // Get the page from the event's state object
    const page = event.state.page;
    // Use the page to load the appropriate content
    $("#container").load("_scripts/ajax/"   page   ".php", function() {
      $.getScript("xxxx");
    });
  });

  // Get the current page from the URL
  let searchParams = new URLSearchParams(window.location.search)
  let key = searchParams.has('page') ? searchParams.get('page') : 'home';
  // Load the content for the current page
  $("#container").load("_scripts/ajax/"   key   ".php", function() {
    $.getScript("xxxx");
  });
  // Update the URL and browser history
  const upKey = key.charAt(0).toUpperCase()   key.slice(1);
  const title = upkey;
  const url = 'index.php?page='   key;
  const state = { 'page': key };
  window.history.pushState(state, title, url);
});

This way, when the user clicks the back/forward buttons, the popstate event will be fired and the current page will be updated accordingly.

Another thing you can do is to use replaceState instead of pushState method which will prevent the browser from adding new state to the history stack, so that if the user navigates back to the previous state, it will not be possible to navigate back to the current state.