关于javascript:使用Ajax时如何保持浏览器历史同步?

关于javascript:使用Ajax时如何保持浏览器历史同步?

How to keep the browser history in sync when using Ajax?

我正在使用ASP.NET Ajax编写一个简单的相册应用程序。
该应用程序使用异步Ajax调用来预加载相册中的下一张照片,而无需在浏览器中更改URL。

问题在于,当用户单击浏览器中的"后退"按钮时,该应用程序不会返回到上一张照片,而是会导航到该应用程序的主页。

有没有一种方法可以诱骗浏览器将每个Ajax调用添加到浏览历史记录中?


更新:现在有不推荐使用HTML4 hashchange功能的HTML5历史记录API(pushState,popState)。 History.js为HTML4浏览器提供跨浏览器的兼容性和可选的hashchange后备。

这个问题的答案与我对这些问题的答案大致相同:

  • 如何在URL中显示Ajax请求?
  • Gmail如何使用丰富的JavaScript处理前进/后退?

总而言之,您肯定要检查以下两个项目,这些项目说明了整个hashchange过程并将ajax添加到混合中:

  • jQuery历史记录(使用散列来管理页面状态并绑定到更改以更新页面)。

  • jQuery Ajaxy(jQuery历史记录的ajax扩展,允许完整的ajax网站,同时完全不引人注目且可优雅地降解)。


MSDN上有一篇有关在ASP.NET AJAX中管理浏览器历史记录的文章


许多网站都使用隐藏的iframe来执行此操作,只需使用新的URL刷新iframe,即可将其添加到浏览历史记录中。然后,您所要做的就是处理应用程序对那些"后退按钮"事件的反应-您将需要检测iframe的状态/位置,或者使用该URL刷新页面。


您可以使用简单轻量的PathJS库。

用法示例:

1
2
3
4
5
6
7
8
9
10
Path.map("#/page1").to(function(){
    ...
});

Path.map("#/page2").to(function(){
    ...
});

Path.root("#/mainpage");
Path.listen();

如果您使用的是Rails,那么绝对可以尝试Wiselinks https://github.com/igor-alexandrov/wiselinks。它是用于浏览器状态管理的瑞士军刀。以下是一些详细信息:http://igor-alexandrov.github.io/blog/2013/07/11/the-way-to-wiselinks-1-dot-0/。


信息:Ajax导航是即将推出的IE8的常规功能。


对于所有关于后退按钮的解决方案,它们都不是"自动的"。对于每一个页面,您都必须做一些工作以保持页面状态。因此,没有办法"欺骗"浏览器,但是有一些很棒的库可以帮助您使用"后退"按钮。


3.5 SP1更新现在支持浏览器历史记录和ASP.NET ajax中的"后退"按钮。


推荐阅读