Question

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

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

正如你所看到的，我已经尝试了几种不同的东西，后退按钮工作得很好但不是前进按钮。

Answer 1

完整的解决方案，可在前后导航上多次单击。

全局注册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);
        }
    });
}

Answer 2

我建议阅读有关浏览浏览器历史记录和bash-4.2$ ipython Python 3.6.3 (default, Jan 4 2018, 16:40:53) Type 'copyright', 'credits' or 'license' for more information IPython 6.4.0 -- An enhanced Interactive Python. Type '?' for help. In [1]: import matplotlib.pyplot as plt --------------------------------------------------------------------------- ImportError Traceback (most recent call last) <ipython-input-4-a0d2faabd9e9> in <module>() ----> 1 import matplotlib.pyplot as plt ~/.local/lib/python3.6/site-packages/matplotlib/__init__.py in <module>() 125 # cbook must import matplotlib only within function 126 # definitions, so it is safe to import from it here. --> 127 from . import cbook 128 from matplotlib.cbook import ( 129 _backports, mplDeprecation, dedent, get_label, sanitize_sequence) ImportError: cannot import name 'cbook'方法here的信息。它明确指出pushState()本身不会导致浏览器加载页面。

就前进按钮不起作用而言，一旦你拨打pushState()浏览器（概念上）在历史的最后一页（最后一页），所以没有其他页面可以“转发”到。

Answer 3

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

在调用pushState时不要window.onpopstate，因为这会将新状态设置为最后一个状态，然后没有任何内容可以继续。

在history.pushState之后，前进按钮不起作用

3 个答案: