Forward button not working after history.pushState

Question

I've found how to fix the back button, but the forward button has remained unfix-able. The url will change but the page doesn't reload, this is what I'm using:

$('.anchor .wrapper').css({
  'position': 'relative'
});

$('.slanted').css({
  'top': 0
});

// Do something after 1 second
$('.original-page').html('');
var href = '/mission.html'

console.log(href);
// $('#content-div').html('');

$('#content-div').load(href + ' #content-div');
$('html').scrollTop(0);
// loads content into a div with the ID content_div

// HISTORY.PUSHSTATE
history.pushState('', 'New URL: ' + href, href);
window.onpopstate = function(event) {
  location.reload();
};

//            response.headers['Vary'] = 'Accept';
//            window.onpopstate = function (event) {
//                alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
//                            location.reload();
//                        response.headers['Vary'] = 'Accept';
//            };

//            $(window).bind('popstate', function () {

//            window.onpopstate = function (event) {
//                window.location.href = window.location.href;
//                location.reload();
//            };

e.preventDefault();

As you can see, I've tried several different things, and the back button works just fine but not the forward button.

Answer 1

Keep in mind that history.pushState() sets a new state as the newest history state. And window.onpopstate is called when navigating (backward/forward) between states that you have set.

So do not pushState when the window.onpopstate is called, as this will set the new state as the last state and then there is nothing to go forward to.

Answer 2

Complete solution working with multiple clicks on back and forward navigation.

Register globally window.onpopstate event handler, as this gets reset on page reload (and then second and multiple navigation clicks don't work):

window.onpopstate = function() {
    location.reload();
};

And, update function performing AJAX reload (and, for my use-case replacing query parameters):

function update() {
    var currentURL = window.location.href;
    var startURL = currentURL.split("?")[0];

    var formParams = form.serialize();

    var newURL = startURL + "?" + formParams;
    var ajaxURL = startURL + "?ajax-update=1&" + formParams;

    $.ajax({
        url: ajaxURL,
        data: {id: $(this).attr('id')},
        type: 'GET',
        success: function (dataRaw) {
            var data = $(dataRaw);

            // replace specific content(s) ....

            window.history.pushState({path:newURL},'',newURL);
        }
    });
}

Answer 3

I suggest reading about navigating browser history and the pushState() method here . It explicitly notes that pushState() by itself will not cause the browser to load a page.

As far as the forward button not working, once you call pushState() the browser is (conceptually) at the last (latest) page of the history, so there is no further page to go "forward" to.