jquery - 如何使用history.js？

Question

在我的网站中，左侧有一个导航栏。当我单击链接时，他们会更改我页面上的#container div，但不会通过 ajax 更改其他内容。我想放置后退和前进按钮，这将使#container div 在状态下前进和前进。我读到 history.js 将是最好的选择，我浏览了 html5 history api，但我不明白如何解决我的问题。另外，我将如何实现刷新按钮？

Answer 1

听起来您正在寻找类似PJAX的东西。

需要明确的是，HTML5 History API（History.js 实现/垫片）不直接维护应用程序的状态。相反，它提供了一种将窗口 URL 中的更改映射到负责实际呈现更改的函数的机制。自述文件提供了一些关于如何实现这一点的见解：

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

如果您不想记录状态，而是希望更改容器的内容（不使用 PJAX 或类似库），则可以改为存储#container每次调用的内容pushState并调整处理函数以执行以下操作：

History.Adapter.bind(window, 'statechange', function() {
    var State = History.getState(); 
    $('#container').empty().append(State.data.content);
});

History.pushState({content:"Hello, world!"}, "State 1", "?state=1");

当然，您需要更改它以反映您的具体情况。