使用History.js点击后退按钮时恢复内容

Question

我在本地测试应用程序中实现了History.js。 一切似乎都可以工作，但是如果我按浏览器的返回按钮，则不会恢复先前的内容。

当用户按下后退按钮时，我是否实际上需要手动再次加载内容（即进行另一个ajax调用）？ 那么github是如何做到的呢？ 我看到他们在代码树中单击后退按钮时不会进行另一个ajax调用。

这是我的代码：

History.Adapter.bind(window,'statechange',function()
    {
        var State = History.getState();
        History.log(State.data, State.title, State.url);
    });


    $('a').each(function(index, link) {

    if ($(link).attr('data-ajax-disabled') != 'true')    {

      $(link).click(function(event)
      {

         var clips = $(this).attr('data-ajax-clips') || '';

         $.ajax($(this).attr('href'),
         {
            data: {_clips:clips},
            success: function(data)
            {

               var data = $.parseJSON(data);


               History.pushState({state:1}, data.title || document.title, 'http://127.0.0.1/site/www/');


               $.each(data.clips, function(key, val)
               {
                  $(key).replaceWith(val);
               });

            }
         });

         return false;

      });
  }
  });

data.clips是一个JSON数组，其中包含HTML对象的id作为键和实际的HTML内容作为值。例如：

'#header' => 'header div中的内容'

如上所述，替换工作正常。我在头部输出了一个随机数。每次点击链接时，都会在标题中输出另一个随机数。然而，如果我点击浏览器的后退按钮，数字将保持不变，只有标题会被恢复（也是随机数）。

- user990827

---

是的，如果您覆盖浏览器历史记录功能，则需要负责在用户返回或前进时显示正确的内容。为了避免针对相同内容进行另一个 AJAX 调用，您可以使用 .hide() 在页面上隐藏它，或者将 HTML 存储在变量中，然后在需要时重新加载它。 - Tobias Cohen

Answer 1

好的,我明白了，同时感谢Tobias Cohen的提示。

必须将加载的数据存储在历史对象（State.data）中。首先让我们看看statechange回调函数如何更改：

History.Adapter.bind(window, 'statechange', function()
{

    var State = History.getState();

    $.each(State.data.clips, function(key, val)
    {
        $(key).replaceWith(val);
    });

    History.log(State.data, State.title, State.url);

});

正如你所看到的，在每次状态变化时，我都可以访问State.data.clips并替换HTML内容。

注意：调用History.pushState()也会触发状态变化。这意味着在我最初的问题中，第二个代码片段是错误的，因为我在那里进行了内容操作。没有必要这样做。只需调用History.pushState()，并在状态变化回调中执行任何内容操作。

因此，为了完整起见，这是我将剪辑推入历史对象的方式：

History.pushState({state:1, clips:data.clips}, data.title || document.title, 'http://127.0.0.1/site/www/');

- user990827