2012-06-15 123 views
0

我有一個使用jQuery的ajax網站,我想知道如何去允許用戶刷新頁面,並有適當的內容加載。jQuery負載()與ajax網站刷新

我這樣做,以便當用戶點擊與我的網站域的href屬性的元素,該網頁的內容被加載到主div。加載的html內容只是一個完整的html文檔,所以我不加載頁面片段。我使用History.js來檢查URL和hashchanges。但是,當我刷新頁面時,只有靜態內容被加載(無風格),而不是包含主頁,主頁的頁眉和頁腳。另一個問題是我需要清除現有的散列以避免GET 404錯誤。我顯然希望整個頁面都能正常加載。

這裏是我到目前爲止的代碼:

jQuery(document).ready(function() { 
    // Prepare 
    var History = window.History; // Note: We are using a capital H instead of a lower h 
    if (!History.enabled) { 
     console.log("History is not enabled."); 
     // History.js is disabled for this browser. 
     // This is because we can optionally choose to support HTML4 browsers or not. 
     return false; 
    } 
    else { 
     console.log("History is enabled"); 
    } 

    //vars for history 
    var changes = 0; 
    // Bind to StateChange Event 
    History.Adapter.bind(window,'statechange',function(){ // Note: We are using statechange instead of popstate 
     var State = History.getState(); // Note: We are using History.getState() instead of event.state 
     History.log(State.data, State.title, State.url); 
    }); 

    $("a").click(function(e) { 
     e.preventDefault(); 
     $("#content").load(this.href, function() { 
      // Change our States 
      changes++; 
      History.pushState({state:changes}, "State " + changes, "#" + this.href); // logs {state:1}, "State 1", "?state=1" 
     }); 
}); 

回答

1

是否使用HTML5?您可以使用本地持久性方法來維護通過ajax加載的項目,或存儲任何特定的鍵,填充加載時需要的內容所需的id或刷新頁面。

沒有HTML5有jQuery.data的選擇,但我認爲你能趕上/存儲頁面刷新之前的持續項目,所以這不太可能是一個可行的解決方案 - 所以我能想到的唯一的其他選擇是使用Cookie(內存中,通過JavaScript(jQuery)創建) - 作爲解決方案會有點惡夢(可能)有很多不同指向同步所有的狀態,以便刷新/重新加載填充正確的東西....但如果設計得很好,它可以爲你工作。

+0

謝謝。我可以嘗試本地存儲的想法。但是現在我真正想知道的是另一種方法是否可行:檢查特定的頭文件元素和html頭文件中對腳本的調用,如果沒有,請執行getScript並通過jQuery加載所需的CSS。這將解決刷新問題,但不適用於JavaScript禁用的瀏覽器... – user1429980