使用BACK按钮返回到页面的先前状态

Question

我正在尝试网站的新功能。 我想通过隐藏/显示<div>元素来进行简单的导航。

例如，当用户单击某个产品上的“详细信息”按钮时，我想隐藏主<div>并显示包含该产品详细信息的<div> 。

问题是要返回上一个“页面”，我必须撤消所有显示/可见性样式的更改，如果用户单击新打开的<div>的“关闭”按钮，则可以。 但是大多数用户会点击“返回”按钮。

有没有一种方法可以使“返回”按钮返回到页面的上一个“状态”，即撤消可见性/显示更改？

谢谢。

Answer 1

是。 您要查找的是AJAX浏览器历史记录 。

有一些开放的实现，例如RSH以及jQuery和YUI等框架的插件/模块。

Answer 2

回答您的头衔问题（这就是我想要的）

使用BACK按钮返回到页面的先前状态

在@ reach4thelasers的答案链接中，您必须设置一个计时器并一次又一次地检查当前锚点：

//On load page, init the timer which check if the there are anchor changes each 300 ms  
$().ready(function(){  
   setInterval("checkAnchor()", 300);  
});

因为按下BACK按钮并仅更改锚点时没有触发Javascript回调...

-

顺便说一句，您正在谈论的模式现在称为单页界面 ！

Answer 3

每当进行更改时，您都需要在URL上添加锚点

www.site.com/page.html#anchor1

这将允许浏览器在其历史记录中维护页面。 在遵循了本教程之后，我在当前站点中实现了它，效果很好，并且使您对需要做的事情有了很好的了解：

http://yensdesign.com/2008/11/creating-ajax-websites-based-on-anchor-navigation/

您在注释中的示例将无效，因为它的工作方式如下：

1. 页面已加载

2. 页面已更改，将锚添加到URL（“返回”按钮将您带回到1）

3. 页面已更改，锚定已更改（“返回”按钮将您带回到2）

4. 页面已更改，锚定已更改（“返回”按钮将您带回到3）

   .... 等等等等..

Answer 4

如果存在的话，从用户体验的角度看，这似乎是一件非常邪恶的事情。 您为什么不在应用程序中设计一个“后退”按钮，并使用设计使用户明白他们应该使用应用程序的后退按钮而不是浏览器。

通过“使用设计”，我的意思是使您的应用程序看起来像浏览器内部的一个自给自足的用户界面，因此，当用户寻找与之交互的控件时，用户的视线停留在页面内，而不是浏览器镶边您的应用。

Answer 5

您可以使用锚来完成此操作，这是在许多Flash应用程序或其他无法逐页浏览的应用程序中完成的。 Facebook相当宽松地使用了这种技术。 每次用户单击应在其历史记录中使用的链接时，请更改页面上的锚点。

所以说我的主页链接是：

http://www.mysite.com/#homepage

对于适用于您的JavaScript魔术的链接，请执行以下操作：

<a href="#otherpage" onclick="javasriptMagic()">My Other Page</a>

这会将用户发送到http://www.mysite.com/#otherpage ，在其中单击“后退”按钮将返回到http://www.mysite.com/#homepage 。 然后，您只需要阅读以下内容的锚即可

window.location.hash

找出您应该在哪个页面上。

Answer 6

看一下基于ItsNat的本教程 ，该Java框架专注于Single Page Interface网站。