使用 History.js 单击后退按钮时恢复内容答案

【问题标题】：Restoring content when clicking back button with History.js使用 History.js 单击后退按钮时恢复内容
【发布时间】：2011-12-18 10:35:12
【问题描述】：

我在本地测试应用程序上实现了 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' => '标题 div 中的内容'

如上所述，替换工作正常。我在标题中输出一个随机数。每次单击链接都会在标题中吐出另一个随机数。但是，如果我按下后退按钮，数字保持不变，只会恢复标题（也是随机数字）。

【问题讨论】：

是的，如果您覆盖浏览器历史记录功能，那么您有责任在用户返回或前进时显示正确的内容。为避免对相同内容再次进行 AJAX 调用，您可以使用 .hide() 将其隐藏在页面上，或者将 HTML 存储在变量中，然后在需要时重新加载。

标签： javascript history.js html5-history

【解决方案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);

});

如您所见，在每次 statechange 时，我都可以访问 State.data.clips 并替换 html 内容。

注意：调用 History.pushState() 时也会发生状态更改。这意味着在我最初的问题中，第二个代码 sn-p 是错误的，因为我在那里进行了内容操作。没有必要。只需调用 History.pushState() 并在 statechange 回调中进行任何内容操作。

为了完整起见，这就是我将剪辑推送到历史对象中的方式：

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

【讨论】：