如何使浏览器的后退按钮使您通过AJAX调用返回? [英] How to make the browser back button take you back through AJAX calls?

问题描述

我的页面上有很多动态生成的复选框.当用户单击这些复选框时，页面上的许多内容将通过ajax动态更改.最终用户抱怨，在单击提交"然后单击后退"按钮以更改某些内容之后，他们的选择被吹走了，因此必须重新做一遍.

我已经看到一些网站(gmail，facebook等...)使用URL中的哈希符号来破解后退"按钮，以便它执行AJAX调用，而不是返回到先前的完整页面请求.我想这样做是在页面提交之前修改URL，以便单击后退"按钮将加载其先前选择的字段.

例如:

在Gmail中，如果我正在查看收件箱，则我的URL如下所示:https://mail.google.com/mail/?shva=1#inbox

然后，如果我单击已发送邮件"，则会执行AJAX调用，并将我的URL修改为如下所示: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一起使用，以防万一.

解决方案

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

我过去使用的另一个jQuery库:

jQuery BBQ:后退"按钮和查询库

此外，如果您不需要所有功能，则可以缩小版本，只为所有浏览器提供hashchange事件:

jQuery hashchange事件

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

编辑:要回答您的问题，

1. 这些链接不会触发javascript，它们只是用哈希值更改了网址. hashchange事件监视此操作，并在哈希更改(记录在浏览器历史记录堆栈中)时触发该事件.
2. location.hash用于读取哈希值，以及从那时开始您需要的任何适当的解析.
3. SEO可能不够聪明，无法为您提供完整的答案，但可以肯定的是，搜索引擎不会索引哈希.
4. 此技术的优点是可用性，因为您的用户将能够正确使用其后退按钮.同样，任何history.back(0) javascript调用也都可以正常工作(我不喜欢它们，但人们会使用它们).缺点是，在您最初开发时，根据代码的编写方式，您可能会遇到一些古怪的错误.总而言之，我认为使用插件可以省去很多繁琐的工作，这是实现可用性的绝佳方法.

I have a page with a lot of dynamically generated check boxes on it. As the users click these check boxes a lot of content on the page changes dynamically via ajax. The end users are complaining that after hitting submit and then hitting the back button to change something, their selections are blown away and they have to do it all over again.

I have seen a few sites (gmail, facebook, etc...) use the hash symbol in the URL to hack the back button so that it performs AJAX calls instead of going back to the previous full page request. I would like to do this to modify the URL before the page submits so that hitting the back button will load their previously selected fields.

For instance:

In Gmail if I am viewing my inbox then my URL looks like this: https://mail.google.com/mail/?shva=1#inbox

Then if I click "Sent Mail" an AJAX call is performed and my URL is modified to look like this: https://mail.google.com/mail/?shva=1#sent

I really like this behavior and want to duplicate it. How is this accomplished?

1. Do your links actually trigger any javascript or do they just link to the URL with the appropriate hash symbol information?

2. How do you read in the hash symbol info in javascript?

3. How does this type of navigation affect search engines? Would a search engine know that two URLS that are the same except for the information after the hash are actually different URLs and index them as such?

4. What are some other pros and cons of this technique that I should take into consideration?

NOTE: I am using C# with ASP.NET Web Forms and ASP.NET MVC 3.0 in case that matters at all.

解决方案

JQuery plugin: http://tkyk.github.com/jquery-history-plugin/

Another jQuery library that I have used in the past:

jQuery BBQ: Back Button & Query Library

Also, a more scaled down version of the previous if you don't need all it's features and just gives you the hashchange event for all browsers:

jQuery hashchange event

NOTE: Just as a brief intro to the above libraries. The hashchange event is supported natively by newer(HTML5 supported) browsers in which case the scripts will just bind to that event. For older browsers that don't support that event, the script creates a polling loop to simulate the event. In either case you can bind to the event and handle appropriately.

EDIT: To answer your questions:

1. The links do not trigger javascript, links simply change the url with the hash. The hashchange event monitors this action, and when the hash changes(which is logged in browser history stack) the event fires.
2. location.hash is used to read the hash value, and any appropriate parsing you would need from that point.
3. Probably not SEO savvy enough to give you a complete answer on that, but fairly sure search engines DO NOT index hashes.
4. Pros for this technique is usability as your users will be able to properly use their back buttons. Also any history.back(0) javascript calls will also work properly(i don't like them but people use them). Cons are that as you're initially developing, you can get some quirky bugs depending on how your code is written. All in all though, I think with the use of the plugins much of the legwork has been taken out of the process and it is a great method for usability purposes.

这篇关于如何使浏览器的后退按钮使您通过AJAX调用返回?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！