2011-05-09 51 views
8

我有一个页面上有很多动态生成的复选框。当用户单击这些复选框时,页面上的许多内容会通过ajax动态更改。最终用户抱怨说,点击提交后点击后退按钮来改变某些内容,他们的选择就会被吹走,他们必须重新做一遍。如何使浏览器返回按钮通过AJAX调用返回?

我已经看到一些网站(Gmail,Facebook等)使用URL中的哈希符号来破解后退按钮,以便它执行AJAX调用,而不是返回到前一个完整页面请求。我想这样做是为了在页面提交之前修改URL,以便点击后退按钮将加载他们以前选择的字段。

例如:

在Gmail中,如果我查看我的收件箱,然后我的URL看起来是这样的:https://mail.google.com/mail/?shva=1#inbox

然后如果我点击“发送邮件”进行AJAX调用和我的网址修改为看起来像这样:https://mail.google.com/mail/?shva=1#sent

我真的很喜欢这种行为,并且想要复制它。这是如何完成的?

  1. 不要你的链接实际上触发任何JavaScript还是仅仅链接到的URL与适当的散列符号信息?

  2. 如何读取JavaScript中的哈希符号信息?

  3. 这种类型的导航如何影响搜索引擎?搜索引擎是否知道除了散列之后的信息相同的两个URL实际上是不同的URL并将它们编入索引之后呢?

  4. 我应该考虑这种技术的其他优点和缺点?

注:我使用C#与ASP.NET Web窗体和ASP.NET MVC 3.0万一重要。

+0

也从这个线程得到的想法http://stackoverflow.com/questions/973739/how-can-i-get-the-same-page-with-the-click-of-back-button-of -browser/973753#973753 – 2011-05-10 05:16:11

+0

这算不上什么我一直在寻找穆罕默德。 – Chev 2011-05-10 13:54:51

回答

2

jQuery插件: http://tkyk.github.com/jquery-history-plugin/

,我过去所使用的另一种jQuery库:

jQuery BBQ: Back Button & Query Library

而且,以前更缩小版本,如果你并不需要所有它的功能,只是给你所有浏览器的hashchange事件:

jQuery hashchange event

注:正如一个简短的介绍,以上述库。 hashchange事件由更新的(HTML5支持的)浏览器本地支持,在这种情况下,脚本将仅绑定到该事件。对于不支持该事件的旧版浏览器,该脚本会创建一个轮询循环来模拟事件。无论哪种情况,您都可以绑定到事件并进行适当的处​​理。

编辑:回答您的问题:

  1. 的链接不会触发的JavaScript,链接只需更改URL与哈希值。 hashchange事件监视此操作,并且当哈希更改(记录在浏览器历史堆栈中)事件触发时。
  2. location.hash用来读取散列值,且任何适当的分析,你需要从该点。
  3. 也许不是SEO足够精明,给你一个完整的答案,但相当肯定搜索引擎不索引哈希值。
  4. 优点对于该技术的可用性为您的用户将能够正确地使用他们的后退按钮。此外,任何history.back(0) JavaScript调用也将正常工作(我不喜欢他们,但人们使用它们)。缺点是,当你最初开发的时候,你可以根据你的代码的写法来得到一些奇怪的错误。总而言之,虽然,我认为与使用多跑腿已取出的过程中的插件,它是可用性的目的一个伟大的方法。
4

为了操纵井号标签,看的location.hash(JavaScript的)。

您还可以在HTML 5 https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history感兴趣的新推/弹出状态的东西。

github做了一些非常酷的事情。在https://github.com/blog/760-the-tree-slider处查看他们的树形滑块功能上的博客条目。

也有的http://tkyk.github.com/jquery-history-plugin/ jQuery的历史插件。 (编辑:我看到乔打我这一个)。

相关问题