在history.pushState之后，前进按钮不起作用 [英] 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.

推荐答案

请记住，history.pushState()将新状态设置为最新的历史状态.在设置的状态之间导航(后退/前进)时，会调用window.onpopstate.

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.

因此，在调用window.onpopstate时不要pushState，因为这会将新状态设置为最后一个状态，然后再无其他内容.

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.

这篇关于在history.pushState之后，前进按钮不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！