[Javascript] 是監測location.hash XHR應用程序的歷史解決方案?


Answers

有三個問題傾向於通過大多數解決方案來解決:

  1. 返回鍵
  2. bookmarkability
  3. 刷新按鈕

基於window.location.hash的解決方案在大多數情況下可以解決所有這三個問題: hash中的hash映射到應用程序/網頁的狀態,因此用戶可以按下“後退”/“前進”/“刷新”和跳轉到散列中的狀態。 他們也可以書籤,因為地址欄中的值已經改變。 (請注意,與瀏覽器歷史記錄相關的IE瀏覽器需要一個隱藏的iframe )。

我只是想要說明的是,一個iframe唯一的解決方案可以使用,而不用監視window.location.hash一個非常有效的解決方案。

谷歌地圖就是一個很好的例子。 為每個用戶動作捕獲的狀態太大,無法放入window.location.hash(地圖質心,搜索結果,衛星vs地圖視圖,信息窗口等)。 所以他們把狀態保存到隱藏的iframe 。 順便說一句,這也解決了[軟]“刷新”的問題。 他們通過“鏈接到此頁面”按鈕分別解決書籤的問題。

我只是認為這是值得了解/分離你正在考慮的問題領域。

Question

眾所周知,在XHR(aka AJAX)網絡應用程序中,沒有構建應用程序的歷史記錄,點擊刷新按鈕往往會將用戶從當前活動中移出。 我偶然發現了location.hash(例如http://anywhere/index.html#somehashvalue )以規避刷新問題(使用location.hash通知您的應用程序當前的狀態,並使用頁面加載處理程序來重置該狀態)。 這真的很好,很簡單。

這讓我想到使用location.hash來跟踪我的應用程序的歷史。 我不想使用現有的庫,因為他們使用iframe等,所以這裡是我的鎳和角錢:當應用程序頁面加載時,我開始這個:

setInterval(
       function(){
           if (location.hash !== appCache.currentHash) {
               appCache.currentHash = location.hash;
               appCache.history.push(location.hash);
               /* ... [load state using the hash value] ... */
               return true;
           }
           return false;
       }, 250
 );

appCache是一個包含應用程序變量的預定義對象)這個想法是從應用程序的哈希值中觸發每個動作。 在體面的瀏覽器中,哈希值更改會在歷史記錄中添加一個條目,而在IE(<= 7)中則不會。 在所有瀏覽器中,使用另一個散列值向後或向前瀏覽頁面不會觸發頁面刷新。 這是間隔的函數接管的地方。 每次檢測到散列值變化(以編程方式,或通過向後或向後點擊),該應用程序可以採取適當的行動。 應用程序可以跟踪自己的歷史,我應該能夠在應用程序中呈現歷史按鈕(特別是對於IE用戶)。

據我所知,這個作品跨瀏覽器,並沒有內存或處理器資源方面的成本。 所以我的問題是:這將是一個可行的解決方案來管理XHR應用程序的歷史? 優缺點都有什麼?

更新:因為我使用自製的框架,我不想使用現有的框架之一。 為了能夠在IE中使用location.hash,並在歷史中使用它,我創建了一個簡單的腳本(是的,它需要一個iframe),這對你可能是有用的。 我發表在我的網站上 ,隨意使用/修改/批判它。




Links