問題描述

眾所周知，在 XHR(又名 AJAX)Web 應用程序中，不會為您的應用程序構建歷史記錄，并且單擊刷新按鈕通常會使用戶退出他/她當前的活動.我偶然發現了 location.hash(例如 http://anywhere/index.html#somehashvalue)來規避刷新問題(使用 location.hash 通知您的應用程序的當前狀態并使用頁面加載處理程序來重置該狀態).真的很好很簡單.

As is well known, in XHR (aka AJAX) web applications no history for your app is build and clicking the refresh button often moves the user out of his/her current activity. I stumbled upon location.hash (e.g. http://anywhere/index.html#somehashvalue) to circumvent the refresh problem (use location.hash to inform your app of it's current state and use a page load handler to reset that state). It's really nice and simple.

這讓我想到了使用 location.hash 來跟蹤我的應用程序的歷史記錄.我不想使用現有的庫，因為它們使用 iframe 等.所以這是我的五分錢:當應用程序頁面加載時，我開始這樣做:

This brought me to thinking about using location.hash to track the history of my app. I don't want to use existing libraries, because they use iframes etc. So here's my nickel and dime: when the application page loads I start this:

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 用戶).

(appCache is a predefined object containing application variables) The idea is to trigger every action in the application from the hash value. In decent browsers a hash value change adds an entry to the history, in IE (<= 7) it doesn't. In all browsers, navigating back or forward to a page with another hash value doesn't trigger a page refresh. That's where the intervalled function takes over. With the function everytime the hash value change is detected (programmatically, or by clicking back or forward) the app can take appropriate action. The application can keep track of it's own history and I should be able to present history buttons in the application (especially for IE users).

據我所知，這可以跨瀏覽器工作，并且在內存或處理器資源方面沒有成本.所以我的問題是:這是否是管理 XHR 應用程序歷史的可行解決方案?有什么好處和壞處?

As far as I can tell this works cross browser and there's no cost in terms of memory or processor resources. So my question is: would this be a viable solution to manage the history in XHR-apps? What are the pros and cons?

更新:因為我使用自制框架，我不想使用現有框架之一.為了能夠在 IE 中使用 location.hash 并將其保存在歷史記錄中，我創建了一個簡單的腳本(是的，它需要一個 iframe)，它可能對您有用.我在我的網站發布了它，請隨意使用/修改/批評它.

Update: because I use my homebrew framework, I didn't want to use one of the existing frameworks. To be able to use location.hash in IE and having it in it's history too, I created a simple script (yes, it's needs an iframe) which may be of use to you. I published it on my site, feel free to use/modify/critizise it.

推薦答案

我認為您將很難知道用戶是前進還是后退.假設 url 開始/myapp#page1 所以你開始跟蹤狀態.然后用戶做一些事情來制作 url/myapp#page2然后用戶做一些事情來再次制作 url/myapp#page1.現在他們的歷史是模棱兩可的，你不知道要刪除什么.

I think you'll have a tricky time knowing if a user went forward or back. Say the url starts /myapp#page1 so you start tracking states. Then the user does something to make the url /myapp#page2 Then the user does something to make the url /myapp#page1 again. Now their history is ambiguous and you won't know what to remove or not.

歷史框架使用 iframe 來解決您提到的瀏覽器不一致問題.您只需要在需要它們的瀏覽器中使用 iframe.

The history frameworks use iframes to get around the browser inconsistencies you mentioned. You only need to use iframes in the browsers that need them.

另一個缺點是用戶總是會先選擇瀏覽器的后退按鈕，然后再選擇您的自定義后退按鈕.我感覺每 250 毫秒讀取一次歷史記錄的延遲也會很明顯.也許您可以將間隔做得更緊，但我不知道這是否會使事情表現不佳.

Another con is that users will always go for their browsers back button before they will go for your custom back button. I have a feeling the delay on reading the history every 250ms will be noticeable too. Maybe you can do the interval even tighter, but then I don't know if that'll make things perform badly.

我使用過 yui 的歷史管理器，雖然它在所有瀏覽器(尤其是 ie6)中并不是一直都能完美運行，但它已經被很多用戶和開發者使用.他們使用的模式也非常靈活.

I've used yui's history manager, and although it doesn't work perfectly all the time in all browsers (especially ie6), it's been used by a lot of users and developers. The pattern they use is pretty flexible too.

這篇關于監控 location.hash 是 XHR 應用中歷史的解決方案嗎?的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！