Gmail 如何处理富 JavaScript 中的后退/转发? [英] How does Gmail handle back/forward in rich 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 锚点值，但我按下了下一个中断"，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 中的后退/转发?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！