如何啓用後退按鈕AJAX頁面

Question

在我工作的這導航如下網站：

$(document).ready(function() { 
    if (!$('#ajax').length) { // Check if index.html was loaded. If not, navigate to index.html and load the hash part with ajax. 
    document.location = document.location.href.substring(0, document.location.href.lastIndexOf('/') + 1) 
     + "#" + document.location.href.substr(document.location.href.lastIndexOf('/') + 1); 
    } 

    if (window.location.hash) // Check if the page is being loaded with a '#'. Load the file. 
    $('#ajax').load(document.location.href.substr(document.location.href.lastIndexOf('#') + 1)); 
}); 

$(document).on("click", "a:not(.regular)", function (e) { 
    var url = this.href; 
    if (url.indexOf("https") != -1 || url.indexOf('.html') == -1) // External link or picture 
    return; 

    e.preventDefault(); 

    $('#ajax').load(url, function() { 
     document.location.href = '#' + url.substr(url.lastIndexOf('/') + 1); 
    }); 
}); 

$(window).on('popstate', function (e) { 
    // Back only! 
    //location.reload(); 
    //$('#ajax').load(this.location); 
}); 

網址時，系統用戶定位，即使用戶按下後退按鈕改變。但是，導航回頁面時不會刷新頁面，因此只有在實際頁面保持不變時才更改網址。

我該如何解決這個問題？
Fiddle
Actual site

Answer 1

在#負責效果後添加頁面標識符。背後的所有東西（URL片段）都應該由瀏覽器在本地解釋。因此，返回相同的URL但不同的片段不會觸發瀏覽器執行「重新加載」，因爲他希望這是一個書籤。

更改爲一個真正的參數.....?pageid=over_ons.html或PATH_INFO .../overons.html

去除此之外：

document.location.href.substring(0, document.location.href.lastIndexOf('/') + 1)

只是

document.location.hash

Answer 2

使用數組存儲歷史。

$(document).ready(function() { 

    var history = []; 

    if (!$('#ajax').length) { // Check if index.html was loaded. If not, navigate to index.html and load the hash part with ajax. 
    document.location = document.location.href.substring(0, document.location.href.lastIndexOf('/') + 1) 
     + "#" + document.location.href.substr(document.location.href.lastIndexOf('/') + 1); 
    history.push(document.location.href.substr(document.location.href.lastIndexOf('/') + 1); 
    } 

    if (window.location.hash) // Check if the page is being loaded with a '#'. Load the file. 
    $('#ajax').load(document.location.href.substr(document.location.href.lastIndexOf('#') + 1), function(){ 
     history.push(document.location.href.substr(document.location.href.lastIndexOf('#') + 1)); 
    }); 
}); 

$(document).on("click", "a:not(.regular)", function (e) { 
    var url = this.href; 
    if (url.indexOf("https") != -1 || url.indexOf('.html') == -1) // External link or picture 
    return; 

    e.preventDefault(); 

    $('#ajax').load(url, function() { 
     document.location.href = '#' + url.substr(url.lastIndexOf('/') + 1); 
     history.push(url.substr(url.lastIndexOf('/') + 1); 
    }); 
}); 

$(window).on('popstate', function (e) { 
    $('#ajax').load(history[history.lastIndexOf(document.location.href)-1], function(){ 
     document.location.href = "#" + history[history.lastIndexOf(document.location.href)-1]; 
    }); 
}); 

Answer 3

我解決了它作爲繼承認，雖然它的工作，它可能遠離最e legant解決方案：

var lastLocation = document.location.href; 

$(document).ready(function() { 
    if (!$('#ajax').length) { // Check if index.html was loaded. If not, navigate to index.html and load the hash part with ajax. 
     document.location = document.location.href.substring(0, document.location.href.lastIndexOf('/') + 1) + 
      "#" + document.location.href.substr(document.location.href.lastIndexOf('/') + 1); 
    } 

    if (window.location.hash) // Check if the page is being loaded with a '#'. Load the file. 
     $('#ajax').load(window.location.hash.substr(1)); 
}); 

$(document).on("click", "a:not(.regular)", function (e) { 
    var url = this.href; 
    if (url.indexOf("https") != -1 || url.indexOf('.html') == -1) // External link or picture 
     return; 

    e.preventDefault(); 

    $('#ajax').load(url, function() { 
     var pagename = url.substr(url.lastIndexOf('/') + 1); 
     // Keep track of last location. 
     lastLocation = document.location.href.replace(window.location.hash, "") + '#' + pagename; 
     document.location.href = '#' + pagename; 
    }); 
}); 

window.onpopstate = function (event) { 
    // Test if popstate changed while lastLocation wasn't updated. 
    if (lastLocation != document.location.href) 
     location.reload(); 
    else 
     return; 
}; 

Answer 4

當你後退按鈕導航是不是因爲back-forward cache觸發ready事件。而是觸發pageshow event。您可以在pageshow事件處理程序中強制頁面重新加載。

window.onpageshow = function(event) { 
    if (event.persisted) { 
     window.location.reload() 
    } 
};