Gmail 如何在富 JavaScript 中处理后退/前进?

问题描述

Gmail 似乎有一些巧妙的方法来处理富 JS 应用程序中的后退/前进按钮.

Gmail seems to have some clever way of handling the back/forward buttons in a rich JS application.

在我的组织中，我们试用了 jQuery 历史插件.该插件基本上每 100 毫秒运行一个函数，该函数解析 URL 并测试它是否已更改.历史记录由 HTTP 锚点跟踪，如果锚点发生变化，则插件调用用户指定的回调，传入新的锚点，以便页面可以执行自定义行为以加载新内容.

In my organisation we trialled the jQuery history plugin. The plugin basically runs a function every 100ms which parses the URL and tests if it has changed. The history is tracked by HTTP anchors, and if the anchor has changed then the plugin calls a user-specified callback, passing in the new anchor, so that the page can perform custom behaviour to load in the new content.

我的组织确定 jQuery 历史插件不符合生产质量.老实说，我不怪他们，因为你真的不想强迫用户的浏览器每 100 毫秒运行一次函数.此外，它使 JS 代码几乎无法调试，因为在 Firebug 或类似的 JS 调试器中单击Break On Next"会始终捕获 jQuery 历史事件，并且不会查看其他事件.

My organisation determined that the jQuery history plugin was not production quality. I don't blame them to be honest, because you don't really want to force your users' browsers to run a function every 100ms. Also, it made the JS code almost impossible to debug, because clicking "Break On Next" in Firebug or similar JS debugger, would always trap the jQuery history event, and no other events would get a look in.

所以我们在这一点上放弃了在浏览器中实现后退/前进功能.但是，我最近注意到 Gmail 很好地实现了这一点.它也使用 HTTP 锚值，但我按下Break On Next"，Gmail 不会每 100 毫秒运行任何类型的函数.Gmail 如何实现这种后退/前进行为?

So we gave up at this point on implementing back/forward functionality in the browser. However, I've recently noticed that Gmail implements this rather nicely. It also uses the HTTP anchor value, but I pressed "Break On Next" and Gmail doesn't run any kind of function every 100ms. How does Gmail manage to implement this back/forward behaviour?

推荐答案

也许你在这里谈论的是 jQuery History 插件:http://www.balupton.com/projects/jquery-history已在许多生产质量站点中使用；我的最爱之一是 http://wbhomes.com.au/

Perhaps you are talking about the jQuery History plugin here: http://www.balupton.com/projects/jquery-history Which has been used in many production quality sites; one of my favourites is http://wbhomes.com.au/

如果是这样，它会对 老一代浏览器进行 200 毫秒测试不要在本地实现 onhashchange 事件.如果没有本地实现该事件，您必须通过使用间隔更改来解决它的功能 - 据我所知，没有其他方法.幸运的是，所有主流浏览器的最新版本现在都原生支持 onhashchange 事件，因此不再需要此检查.

If so, it uses a 200ms test for older generation browsers which do not implement the onhashchange event natively. Without that event implemented natively, you have to workaround it's functionality by using a interval change - there just isn't any other way to my knowledge. Fortunately the latest versions of all the major browsers now support the onhashchange event natively, so this check is no longer needed.

但是，让我们来看看 200 毫秒间隔检查的作用.如果它们在 IE6 或 7 上，它将检查 iframe 的状态(因为在那些浏览器中，需要 iframe 来模拟后退和前进按钮 - 而对于其他浏览器，则不需要 iframe).如果他们使用的是另一个不是 IE 的旧浏览器，那么它可以在检查中使用 location.getHash() (没有前面解释的 iframe).这两种类型的检查都被设计为非常快速和尽可能少，将必要的开销降到几乎没有.这完全取决于浏览器实际上愿意让您做什么，并尝试使用尽可能少的密集代码来完成.

But alas, let's go into what what that 200ms interval check does. If they are on IE6 or 7, it will check the state of an iframe (as in those browsers a iframe is required to emulate the back and forward buttons - where for other browsers a iframe is not required). If they are using another older browser which is not IE then it can just use location.getHash() in the check (without an iframe as explained before). Both types of checks are designed to be extremely fast and as minimal as possible, bringing the necessary overhead down to next to nothing. It's all about what the browser is actually willing to let you do, and trying to do it using the least intensive code possible.

注意:在 jQuery History 的 v1.4.2-final(2010 年 8 月 12 日)发布之前，唯一认可的原生支持 onhashchange 的浏览器是 IE8 及更高版本.这已在所有较新版本的 jQuery History 项目中得到解决.

Note: Before the v1.4.2-final (August 12, 2010) release of jQuery History the only recognised browsers which supported onhashchange natively was IE8 and above. This has been resolved in all newer versions of the jQuery History project.

这篇关于Gmail 如何在富 JavaScript 中处理后退/前进?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！