使用 onpopstate 和 Balupton 的 History.js 来返回

Question

我的目标是存储网站的当前状态，以便我可以通过按浏览器后退按钮返回到该状态。目前，我已经使用 HTML5 本机函数使用 pushState 和 popState 实现了此目的，如下所示：

<script type="text/javascript">
  $("a").click(function(e) {
    $("#element").load($(this).attr('href') + ' #otherElement');
    $("html, body").animate({ scrollTop: 0 }, 0);
    previous_page = location.href;
    window.history.pushState({page: $(this).index()}, $(this).html(), $(this).attr('href'));
    e.preventDefault();
    return false;
  });

  window.popupstate = function(e) {
    location.reload();
  }
</script>

这段代码在 Firefox 4 中按预期工作。但是，在 Chrome 中，页面会永久重新加载。因此，我想使用 Balupton 的 History.js 库在所有浏览器中运行代码片段，但我发现 Balupton 页面上的示例不是很有帮助。

我已经尝试了以下方法（不起作用）：

var History = window.History;
History.pushState({state:'root'},'root',$(this).attr('href'));

$("a").click(function(e) {
  $("#element").load($(this).attr('href') + ' #otherElement');
  $("html, body").animate({ scrollTop: 0 }, 0);
  History.pushState({state:$(this).attr('href')},$(this).attr('href'),$(this).attr('href'));
  return false;
});

History.Adapter.bind(window,'statechange',function(){ 
    var State = History.getState(); // Note: We are using History.getState() instead of event.state
    History.log('statechange:', State.data, State.title, State.url);
    if (State.title == 'root') {
        History.back();
        location.reload();
    }
});

谢谢。

Answer 1

我已经为我的问题找到了有效的解决方案。由于我在替换整个 DOM 路径时丢失了绑定，因此我只需要隐藏/显示元素，如下所示：

var History = window.History;

$("a").live('click', function(e) {
    if ($(this).attr('href').startsWith('corpus-')) {
        $("#element").hide();
        $("#newElement").load($(this).attr('href') + ' #otherElement');
        $("html, body").animate({ scrollTop: 0 }, 0);
        History.pushState({state:$(this).attr('href')},$(this).attr('href'),$(this).attr('href'));
        return false;
    }
});

History.Adapter.bind(window,'statechange',function(){ 
    var State = History.getState();
    History.log('statechange:', State.data, State.title, State.url);
    $("#element").toggle();
    $("#newElement").toggle();
});

该解决方案还不太理想。