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.

ssten · Accepted Answer · 2018-06-13T07:06:46.467

24

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.

edited Jun 13 '18 at 07:06

answered Jun 13 '18 at 07:00

ssten

1,848
1
16
28

5

This is exactly what I needed. I didn't realize I was doing this until I read this answer. I had to separate the `history.pushState` call from the function so that I wasn't calling `history.pushState` when I used `window.onpopstate`. – Timothy Fisher Jun 22 '19 at 20:38
1

Okay, This works perfectly. Saved a lot of my time. – ANAND SONI Aug 10 '21 at 17:14

score 2 · Answer 2 · answered Mar 25 '20 at 09:55

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);
        }
    });
}

score 0 · Answer 3 · answered Jun 01 '18 at 18:11

0

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.

answered Jun 01 '18 at 18:11

DavidW

1,413
10
17

5

To clarify, I mean, after using the back button following pushState and then attempting to use the forward button does this. – dan178 Jun 01 '18 at 18:33

Forward button not working after history.pushState

3 Answers3

Linked