history.pushState 后前进按钮不起作用答案

【问题标题】：Forward button not working after history.pushStatehistory.pushState 后前进按钮不起作用
【发布时间】：2018-06-01 15:52:04
【问题描述】：

我找到了如何修复后退按钮，但前进按钮仍然无法修复。网址会改变，但页面不会重新加载，这就是我正在使用的：

$('.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();

如您所见，我尝试了几种不同的方法，后退按钮可以正常工作，但前进按钮不行。

【问题讨论】：

标签： javascript jquery html ajax pushstate

【解决方案1】：

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

所以在调用window.onpopstate 时不要pushState，因为这会将新状态设置为最后一个状态，然后就没有什么可继续的了。

【讨论】：

这正是我所需要的。直到我读到这个答案，我才意识到我正在这样做。我必须将history.pushState 调用与函数分开，这样我在使用window.onpopstate 时就不会调用history.pushState。
好的，这很好用。节省了我很多时间。

【解决方案2】：

通过多次点击后退和前进导航的完整解决方案。

全局注册 window.onpopstate 事件处理程序，因为这会在页面重新加载时重置（然后第二次和多次导航点击不起作用）：

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

并且，更新函数执行 AJAX 重新加载（并且，对于我的用例替换查询参数）：

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

【讨论】：

【解决方案3】：

我建议阅读有关浏览浏览器历史记录和pushState() 方法here 的内容。它明确指出pushState() 本身不会导致浏览器加载页面。

至于前进按钮不起作用，一旦您调用pushState()，浏览器（概念上）就位于历史记录的最后（最新）页面，因此没有其他页面可以“前进”到。

【讨论】：

澄清一下，我的意思是，在使用 pushState 之后的后退按钮然后尝试使用前进按钮后会这样做。