如何使用history.js？

Question

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

Answer 1

听起来您要查找的内容类似于 PJAX。

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

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

如果您不想记录状态，而是希望更改容器的内容（不使用 PJAX 或类似库），则可以在每次调用 pushState 时存储 #container 的内容并调整处理函数做这样的事情：

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");

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