6

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

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

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

有没有办法让 BACK 按钮回到页面的先前“状态”，即撤消可见性/显示更改？

谢谢。

4

6 回答 6

6

是的。您要查找的内容称为AJAX 浏览器历史记录。

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

于 2009-11-13T22:52:06.407 回答
4

回答你的标题问题（这就是我要找的）

使用 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回调，只有锚点被改变......

--

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

于 2010-10-27T08:07:58.873 回答
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）

    .... 等等等等..

于 2009-11-13T22:54:02.470 回答
0

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

通过“使用设计”，我的意思是让您的应用程序在浏览器中看起来像一个自给自足的用户界面，因此当用户正在寻找与之交互的控件时，他们的眼睛会停留在您的页面内，而不是在浏览器 chrome 上你的应用程序。

于 2009-11-13T22:48:32.840 回答
0

您可以使用锚点来执行此操作，这是在许多 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

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

于 2009-11-13T22:55:58.283 回答
0

看看这个基于 ItsNat 的教程，这是一个专注于单页界面网站的 Java Web 框架

于 2011-02-09T16:24:54.363 回答