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

I've created a page using JQuery and Ajax that helps a user filter through a series of options and ultimately displays a filtered list of products meeting their specification.

我使用JQuery和Ajax创建了一个页面,帮助用户过滤一系列选项,最终显示符合其规范的过滤产品列表。

This all works fine.

一切正常。

The problem i'm having is the "Back Button" problem with Ajax, i know how to get around this with anchors on static content (i.e. Filter.php#Step2).

我遇到的问题是Ajax的“后退按钮”问题,我知道如何利用静态内容的锚点解决这个问题(即Filter.php#Step2)。

However, the page works by returning a list of product specifications, when a spec link is clicked, Ajax loads the same page again applying the links parameters, this is repeated up to six times, after which, the user is redirected to the filtered product URL.

但是,页面通过返回产品规范列表来工作,当单击spec链接时,Ajax再次应用链接参数加载同一页面,这最多重复六次,之后,用户被重定向到过滤产品URL。

If the user then clicks "Back", then of course, the filter page reloads from step 1 rather than the last step (step 6).

如果用户然后点击“返回”,那么当然,过滤页面从步骤1重新加载而不是最后一步(步骤6)。

Does anyone know if this is even possible?

有谁知道这是否可能?

2 个解决方案

#1

Every time you want to be able to go back to the previous step, change window.location.hash.

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

Ie.

window.location.hash = 'step1';

This changes the #foo part in the URL. You will also need a timer in JavaScript which checks if the hash was changed, as there is no way to reliably detect hitting the back button. Something along the lines of...

这会更改URL中的#foo部分。您还需要一个JavaScript中的计时器来检查哈希值是否已更改,因为无法可靠地检测到按下后退按钮。有点......

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

I hope this helps

我希望这有帮助

#2

I can't say I've implemented this before personally, but I remember the jQuery Tools tab component doing something similar. I'm not sure if it will work for your particular situation, but it may be worth looking at their approach as a starting point.

我不能说我之前已经实现了这个,但我记得jQuery Tools选项卡组件做了类似的事情。我不确定它是否适用于您的特定情况,但可能值得看看他们的方法作为起点。

jQuery Tools AJAX:ed tabs with History support

jQuery Tools AJAX:带有History支持的ed选项卡

#1