javascript - 在使用 History.js 进入下一页之前加载和保存状态

Question

twitter 是如何实现这种功能的？假设我在网页的这一部分。

然后假设我点击了另一个页面（比如说 Dev Ops Borat）

点击之后。我点击后退按钮然后我注意到我回到了上一页

请注意，我的滚动条的位置仍然与以前相同。因此，在我转到下一页之前，它肯定会保存我浏览器的先前状态。

所以我的问题。如何使用 History.js 实现这一点？我上来是这样的。

History.Adapter.bind(window, 'statechange', function(e) { // Note: We are using statechange instead of popstate
    var State = History.getState();
    $("body").css("cursor", "default");
    $.get(State.url, function(data) {
        //Get The title of the page
        var newTitle = $(data).filter('title').text();
        //replace the page with the new requested page
        //$('#main-content').html($(data).find('#main-content').html());
        $('#main-content').children().remove();
        $('#main-content').html($(data).find('#main-content').html());
        //Change the  title of the page to requested page title
        document.title = newTitle;

    },"html");

});

这似乎工作正常，但是当我单击后退按钮时，上一个网页的先前状态与我离开它的状态不同。（如上面的示例）

Answer 1

不确定我是否完全理解您的要求，但是如何通过 History.pushState 存储每个页面的内容 - 然后从 State.data.content 中检索它而不是每次都执行新的 AJAX 请求？

因此，将您的 AJAX ($.get) 替换为以下内容：

var $main_content = $('#main_content');

History.Adapter.bind(window, 'statechange', function(e) { 
   var State = History.getState();
   $("body").css("cursor", "default");
   $main_content.html(State.data.content);
});

然后将您使用 AJAX 加载的内容添加到 State.data.content

$.ajax({
   url: url
}.done(function(data) { 
   History.pushState({content: data}, null, '/replace/with/dynamic/urlpath');
   $main_content.html(data);
});

如果您有更改 DOM 的 javascript 函数，即：show() hide()，您可以使用每次更改 DOM 时运行的全局函数更新 State.data.content。