javascript – how to force-refresh the previous page's url when the back button on the browser is pressed after changing it with window.history.pushState()-ThrowExceptions

Exception or error:

I am trying to build a web app where the user can navigate from one page to another without reloading the pages but at the same time updating the url as the content changes. I use jQuery .load() function to change the page content and window.history.pushState() to change the URL.

$(".change-url").on('click', function (e)
{ 
    window.history.pushState('page', 'title', 'about.php');
    $("#page-content").load('about.php');
})

When I click the “change-url” button on the home.php page to go to the about.php page, it works fine and the url changes to about.php but when I click the back button on the browser from the about.php page, the #page-content div still shows about.php page content although the url changes correctly back to home.php.

Please how can I force the browser to reload the new url (home.php) when the back button is pressed? or is there a better way of achieving this? Thanks.

How to solve:

Leave a Reply

Your email address will not be published. Required fields are marked *