如何处理 jQuery 中的后退按钮？
我只是找不到令人满意的方法来处理浏览器的历史记录。当然有一些可爱的插件，比如 History.js，它可以很好地处理较小的事情。但让我举个例子：
我有一个多页表单，要求用户提供不同的信息。每次提交到下一个页面后（实际上是一样的，只是根据HTTP-POST变量改变视图），页面上有一些动画和变化：
- 主要内容更改为下一个表单（带有slideUp/slideDown）
- 进度条通过该条下方的动画更改其状态
- ，有关输入的一些的一些信息淡入
所以现在这是非常基本的，但我已经在挣扎，因为所有动画（最后一个） 2 部分）每个状态都不同（不同的 div、不同的输入源），我不知道如何使它们如此通用，以至于我不必单独指定它们。
我可以忍受这一点，但是当用户点击后退按钮时，我必须再次重新定义所有这些动画（相反）。内容加载肯定没有问题，它基本上只是使用 ajax-load 重新加载文件：
- 我执行一个
pushstate，其中输入数据作为提交时的stateObj， - 所以我可以在绑定的“statechange”事件中执行内容加载
正如前面所说，其余的让我发疯。
I just can't find a satisfying way to handle the Browser's History. Sure there are lovely plugins like History.js, which works fine for smaller things. But let me give you an example:
I have a multi-paged form that asks the user for different things. After every submit to the next page (actually the same, it just changes the view depending on HTTP-POST variables), there are some animations and changes on the page:
- the main content changes to the next form (with a slideUp/slideDown)
- the progress bar changes it's state with an animation
- below this bar, some information about some of the input fades in
So that's pretty basic right now, but I'm already struggling, because all the animations (the last 2 parts) are different on every state (different div, different input-sources) and I have no idea how to make them so generic, that I have not to specify them separatly.
I could live with that though, but when a user hits the back button I have to redefine all those animations again (in reverse). The content-load sure is no problem, it basically just reloads the file with an ajax-load:
- I execute a
pushstatewith the input data as thestateObjon submit - so I can execute the content-load in the bound 'statechange' event
As said though, the rest drives me insane.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
我强烈建议您掌握并学习 Backbone.js。它与 jQuery 配合得很好，并以修改后的 MVC 模式设置您的网站。它还拥有一个出色的系统来处理 URL 更改并执行适当的代码。
至于滑动，如果你想反转动画，那么跟踪可能会有点麻烦。当我在屏幕之间滑动时，我对应用程序所做的不是有时向上滑动，有时向下滑动，我总是会移动 DOM 中我滑动到的元素，以便它位于我滑动的元素之后。这样幻灯片总是朝同一个方向移动，我的动画就不会变得愚蠢。
I would highly recommend grabbing and learning Backbone.js. It plays great with jQuery and sets up your website in a modified MVC pattern. It also has a great system for handling URL changes and executing the appropriate code.
As for sliding, if you want to reverse animations, that could be a bit of a pain to keep track of. What I did with my app when I was sliding between screens is instead of sometimes sliding up and sometimes sliding down, I would always move the element in the DOM that I was sliding to so that it was after the element I was sliding from. That way the slide was always going in the same direction and my animations wouldn't get all goofy.
您可以尝试 JavaScriptMVC，其中包含 jQuery。不确定它是否满足您的确切要求，但它是 JavaScript 和 MVC...
You could try JavaScriptMVC, which includes jQuery. Not sure if it meets your exact requirements but it is JavaScript and MVC...
虽然不是很严格的 MVC（其中有几个用于 JavaScript），但我认为 backbone js 是一个很棒的框架，它基于 MVC 的概念，但经过重新设计以更好地适应 JavaScript 语言和环境。
Although not quite strictly MVC (of which there are several for JavaScript) I think backbone js is a great framework, that is based around the concepts of MVC, but re-worked to better suit the JavaScript language and environment.
经过一番努力之后，我决定采用最简单、最好的解决方案来解决我的问题：使用基础知识。
我没有在用户点击后退/前进按钮时向后/向前设置所有内容的动画，而是使用 ajax 重新加载整个站点，这样我就可以将 HTML/PHP 回退与所选站点的 stateObj 一起使用。
History.js 的问题是它无法区分 onstatechange 事件中的 PushState 和后退/前进按钮。所以我从 History.js 降级为带有 PushState 的标准 W3C 行为。 1.8.0 将会有一个更新，允许区分内部和外部状态更改。
感谢您的所有答案，但我想这是处理它的最准确的方法，而单独使用 MVC 并不能解决问题 - 为什么我不接受任何其他答案！
Well after a lot of punching around and stuff, I decided to degrade to the simplest and best solution for my problem: Using the basics.
Instead of animating everything backwards/forwards when the user hits the back/forward buttons, I just reloaded the whole site with ajax so I can use the HTML/PHP fallback with the stateObj of the selected site.
Problem with History.js though is that it can't distinguish between pushState and back/forward button in the onstatechange-event. So I degraded from History.js to the standard W3C behaviour with pushstate. There will be an update with 1.8.0 that allows to distinguish between internal and external statechanges.
Thanks for all the answers, but I guess this is the most accurate way of dealing with it, while using MVC alone doesn't solve the problem - why I didn't accept any other answer!