問題描述

Gmail 似乎有一些巧妙的方法來處理富 JS 應用程序中的后退/前進按鈕.

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

在我的組織中，我們試用了 jQuery 歷史插件.該插件基本上每 100 毫秒運行一個函數(shù)，該函數(shù)解析 URL 并測試它是否已更改.歷史記錄由 HTTP 錨點跟蹤，如果錨點發(fā)生變化，則插件調(diào)用用戶指定的回調(diào)，傳入新的錨點，以便頁面可以執(zhí)行自定義行為以加載新內(nèi)容.

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 歷史插件不符合生產(chǎn)質(zhì)量.老實說，我不怪他們，因為你真的不想強迫用戶的瀏覽器每 100 毫秒運行一次函數(shù).此外，它使 JS 代碼幾乎無法調(diào)試，因為在 Firebug 或類似的 JS 調(diào)試器中單擊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.

所以我們在這一點上放棄了在瀏覽器中實現(xiàn)后退/前進功能.但是，我最近注意到 Gmail 很好地實現(xiàn)了這一點.它也使用 HTTP 錨值，但我按下Break On Next"，Gmail 不會每 100 毫秒運行任何類型的函數(shù).Gmail 如何實現(xiàn)這種后退/前進行為?

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已在許多生產(chǎn)質(zhì)量站點中使用；我的最愛之一是 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 毫秒測試不要在本地實現(xiàn) onhashchange 事件.如果沒有本地實現(xiàn)該事件，您必須通過使用間隔更改來解決它的功能 - 據(jù)我所知，沒有其他方法.幸運的是，所有主流瀏覽器的最新版本現(xiàn)在都原生支持 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 的狀態(tài)(因為在那些瀏覽器中，需要 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 日)發(fā)布之前，唯一認可的原生支持 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模板網(wǎng)！