使用 Ajax 时如何保持浏览器历史记录同步?
我正在使用 ASP.NET Ajax 编写一个简单的相册应用程序。
该应用程序使用异步 Ajax 调用来预加载相册中的下一张照片,而无需更改浏览器中的 URL。
问题是,当用户单击浏览器中的后退按钮时,应用程序不会返回到上一张照片,而是导航到应用程序的主页。
有没有办法欺骗浏览器将每个 Ajax 调用添加到浏览历史记录中?
I'm writing a simple photo album app using ASP.NET Ajax.
The app uses async Ajax calls to pre-load the next photo in the album, without changing the URL in the browser.
The problem is that when the user clicks the back button in the browser, the app doesn't go back to the previous photo, instead, it navigates to the home page of the application.
Is there a way to trick the browser into adding each Ajax call to the browsing history?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(8)
更新:现在有 HTML5 History API(pushState、popState),它弃用了 HTML4
hashchange
功能。 History.js 提供跨浏览器兼容性和 可选hashchange
HTML4 浏览器的后备。这个答案问题将或多或少与我对这些问题的回答相同:
总之,您一定会想查看这两个项目,它们解释了整个 hashchange 过程并将 ajax 添加到其中:
jQuery 历史记录(使用哈希来管理页面状态并绑定到更改以更新页面)。
jQuery Ajaxy(jQuery History 的 ajax 扩展,允许完整的 ajax 网站,同时完全不显眼且可优雅降解)。
Update: There is now the HTML5 History API (pushState, popState) which deprecates the HTML4
hashchange
functionality. History.js provides cross-browser compatibility and an optionalhashchange
fallback for HTML4 browsers.The answer for this question will be more or less the same as my answers for these questions:
In summary, you'll definitely want to check out these two projects which explain the whole hashchange process and adding ajax to the mix:
jQuery History (using hashes to manage your pages state and bind to changes to update your page).
jQuery Ajaxy (ajax extension for jQuery History, to allow for complete ajax websites while being completely unobtrusive and gracefully degradable).
信息:Ajax 导航是 即将推出的 IE8 的常规功能。
Info: Ajax Navigation is a regular feature of the upcoming IE8.
如果您使用 Rails,那么一定要尝试 Wiselinks https://github.com/igor-alexandrov/wiselinks。 它是浏览器状态管理的瑞士军刀。 以下是一些详细信息: http://igor-alexandrov.github.io/blog/2013/07/11/the-way-to-wiselinks-1-dot-0/。
If you are using Rails, then definitely try Wiselinks https://github.com/igor-alexandrov/wiselinks. It is a a Swiss Army knife for browser state management. Here are some details: http://igor-alexandrov.github.io/blog/2013/07/11/the-way-to-wiselinks-1-dot-0/.
您可以使用简单的 & 轻量级 PathJS lib。
使用示例:
You can use simple & lightweight PathJS lib.
Usage example:
3.5 SP1 更新现在支持 ASP.NET ajax 中的浏览器历史记录和后退按钮。
The 3.5 SP1 update has support for browser history and back button in ASP.NET ajax now.
对于所有有关后退按钮的解决方案,没有一个是“自动”的。 对于每一个页面,您都必须做一些工作来保留页面的状态。 所以不,没有办法“欺骗”浏览器,但是有一些很棒的库可以帮助您使用后退按钮。
For all solutions about the back button, none of them are "automatic". With every single one you are going to have to do some work to persist the state of the page. So no, there isn't a way to "trick" the browser, but there are some great libraries out there that help you with the back button.
许多网站利用隐藏的 iframe 来做到这一点,只需使用新的 URL 刷新 iframe 即可将其添加到浏览历史记录中。 然后您所要做的就是处理应用程序对这些“后退按钮”事件的反应 - 您要么需要检测 iframe 的状态/位置,要么使用该 URL 刷新页面。
Many websites make use of a hidden iframe to do this, simply refresh the iframe with the new URL, which adds it to the browsing history. Then all you have to do is handle how your application reacts to those 'back button' events - you'll either need to detect the state/location of the iframe, or refresh the page using that URL.
MSDN 有一篇关于在 ASP.NET AJAX 中管理浏览器历史记录的文章
MSDN has an article about Managing Browser History in ASP.NET AJAX