Gmail如何在富JavaScript中处理回退/转发？ [英] How does Gmail handle back/forward in rich JavaScript?

问题描述

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

我的组织确定jQuery历史记录插件不是生产质量。我不责怪他们是诚实的，因为你不想强制你的用户的浏览器每100ms运行一个函数。另外，它使得JS代码几乎不可能调试，因为在Firebug或类似的JS调试器中单击Break On Next将始终捕获jQuery历史事件，并且没有其他事件可以查看。

因此，我们放弃了在浏览器中实现后退/前进功能。不过，我最近注意到Gmail很好地实现了这一点。它也使用HTTP定位值，但是我按下了下一次中断，Gmail每隔100毫秒就不运行任何一种功能。 Gmail如何设法实现这种后退/前进行为？

解决方案

也许您在讨论jQuery History插件：
http://www.balupton.com/projects/jquery-history
已在许多生产质量网站中使用;我的最爱之一是 http://wbhomes.com.au/

如果是这样，它会对旧版浏览器使用200ms测试 a>本身不执行 onhashchange 事件。如果没有在本地实现该事件，则必须通过使用间隔更改来解决它的功能 - 根据我的了解，没有任何其他方法。幸运的是，所有主流浏览器的最新版本现在都支持onhashchange事件，因此不再需要此检查。

但是，唉，让我们来看看200ms间隔检查确实。如果他们在IE6或7上，它将检查iframe的状态（如在那些浏览器中需要iframe来模拟后退和前进按钮 - 其他浏览器不需要iframe）。如果他们使用的是另一个不是IE的浏览器，那么它可以在检查中使用 location.getHash（）（没有iframe，如前所述）。两种类型的支票都设计得非常快速且尽可能最少，从而将必要的费用降到几乎没有。这完全取决于浏览器实际上愿意让你做什么，并试图用尽可能少的代码来完成它。

注意：在v1.4.2-final （2010年8月12日）发布的jQuery History本身支持onhashchange的唯一被认可的浏览器是IE8及更高版本。在jQuery History项目的所有新版本中已经解决了这个问题。

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

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.

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.

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?

解决方案

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/

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.

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.

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屋！