Forward button not working after history.pushState

问题

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.

回答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.

回答2:

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.

来源：https://stackoverflow.com/questions/50647136/forward-button-not-working-after-history-pushstate

标签

javascript

jquery

html

ajax

pushstate