代码之家 › 专栏 › 技术社区 › Adam Burley

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

gmail hash jquery-plugins javascript

8

Adam Burley · 技术社区 · 15 年前

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

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

我的组织确定jquery历史插件不是生产质量。我不怪他们说实话,因为你不想强迫你的用户浏览器每100毫秒运行一个函数。而且,这使得JS代码几乎不可能调试,因为在Firebug或类似的JS调试器中单击“break on next”,总是会捕获jquery历史事件,而没有其他事件可以查看。

因此,我们放弃了在浏览器中实现后退/前进功能。不过,我最近注意到Gmail实现得相当好。它也使用HTTP锚定值,但我按下了“break on next”,Gmail不会每隔100毫秒运行任何类型的函数。Gmail是如何实现这种后退/前进行为的?

2 回复 | 直到 15 年前

1

6

balupton 15 年前

也许您在这里谈论的是jquery历史插件: http://www.balupton.com/projects/jquery-history 它已经在许多生产质量网站上使用;我最喜欢的是 http://wbhomes.com.au/

如果是这样,它使用200毫秒的测试 older generation browsers 它不实现 onhashchange 本机事件。如果没有本机实现的事件,您必须通过使用间隔更改来解决它的功能——据我所知,没有任何其他方法。幸运的是,所有主要浏览器的最新版本现在都支持OnHashChange事件,因此不再需要进行此检查。

但是,唉,让我们来看看200米的间隔检查是怎么做的。如果它们在IE6或7上,它将检查iframe的状态(在这些浏览器中,iframe需要模拟后退和前进按钮-对于其他浏览器,iframe不需要)。如果他们使用的是另一个旧的浏览器,而不是IE,那么它只能使用 location.getHash() 在支票中(没有前面解释的iframe)。这两种类型的检查都设计得非常快,并且尽可能地最小化,将必要的开销降到几乎为零。这一切都是关于浏览器实际上愿意让您做什么,并尝试使用尽可能少的密集的代码。

注:在jquery history v1.4.2-final(2010年8月12日)发布之前,唯一认可的本地支持hashchange的浏览器是ie8及更高版本。这已在jquery历史记录项目的所有较新版本中解决。

2

1

Community CDub 8 年前

您可能需要检查上一个问题:

Is there a way to catch the back button event in javascript?

似乎jquery中的方法是唯一的方法,因为Yui也是这样做的:

http://developer.yahoo.com/yui/history/