具有动态内容的Ajax后退按钮

Question

我使用JQuery和Ajax创建了一个页面，该页面可以帮助用户筛选一系列选项，并最终显示符合其规格的产品的筛选列表。

这一切都很好。

我遇到的问题是Ajax的“后退按钮”问题，我知道如何使用静态内容（例如Filter.php＃Step2）上的锚点解决此问题。

但是，该页面通过返回产品规格列表来工作，当单击规格链接时，Ajax会使用链接参数再次加载同一页面，此过程最多重复六次，之后，用户将被重定向到过滤的产品网址。

如果用户然后单击“返回”，则当然，筛选器页面将从步骤1而不是最后一步（步骤6）重新加载。

有谁知道这是否有可能？

Answer 1

每次您希望能够返回上一步时，请更改window.location.hash。

就是

window.location.hash = 'step1';

这将更改URL中的#foo部分。 您还需要JavaScript中的计时器来检查哈希是否已更改，因为无法可靠地检测到按下后退按钮。 类似于...

var oldHash = window.location.hash;
setInterval(function(){
  if(window.location.hash != oldHash) {
    //the hash was changed, do something
  }
}, 50);

我希望这有帮助

Answer 2

我不能说我以前亲自实现过，但是我记得jQuery Tools选项卡组件做了类似的事情。 我不确定这是否适用于您的特定情况，但是可能值得以他们的方法为起点。

jQuery Tools AJAX：带有历史记录支持的ed选项卡