Question

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

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

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

有没有办法让BACK按钮回到页面的上一个“状态”，即撤消可见性/显示变化？

感谢。

Answer 1

是。您正在寻找的是AJAX browser history。

有一些开放的实现，如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回调...

-

顺便说一句，您所谈论的模式现在称为 Single Page Interface ！

Answer 3

每当进行更改时，您都需要向网址添加锚点

www.site.com/page.html#anchor1

这将允许浏览器在其历史记录中维护页面。我按照本教程后在我当前的网站上实现了它，它非常有用，可以让你很好地理解你需要做什么：

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

评论中的示例不起作用，因为它的工作原理如下：

页面加载
页面已更改，将锚点添加到URL（后退按钮将您带回到1）
页面已更改，锚点已更改（后退按钮按钮将您带回2）
页面已更改，锚点已更改（后退按钮按钮会将您带回3）

....等等......

Answer 4

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

通过“使用设计”，我的意思是让您的应用程序看起来像浏览器内部的自给自足的用户界面，因此当用户寻找控件时，用户的眼睛会停留在您的页面内，而不是浏览器的Chrome浏览器与您的应用互动。

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 Web框架，查看this tutorial

使用BACK按钮恢复到页面的先前状态

6 个答案: