使用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。