首页 / 知识

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

2023-04-13 08:20:00

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中的"后退"按钮。

浏览器同步应用程序异步