Question

在我的网站中，左侧有一个导航栏。当我点击链接时，他们会在我的页面上更改#container div，但不会通过ajax更改其他内容。我想放回和转发按钮，这将使#container div在状态中前进和后退。我读到history.js对于这个来说是最好的，我经历了html5历史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或类似的库），那么每次调用#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");

当然，您需要对此进行更改以反映您的具体情况。

如何使用history.js？

1 个答案: