如何在後退按鈕單擊時反轉AJAX動作？

我想弄清楚歷史API，但在閱讀文檔後，我幾乎無法理解任何內容。如何在後退按鈕單擊時反轉AJAX動作？

例如我有以下AJAX：

$("#hund").click(function(e) { 
     e.preventDefault(); 
$(".result").load("hund.html #content", function() { 
    });

以下瀏覽器URL處理：

var stateObj = { foo: "bar" }; 
history.pushState(stateObj, "page 2", "bar.html");

這我明白。點擊一下，更改網址。點擊返回，更改網址。

但我想，如果在AJAX單擊後點擊後退按鈕，我希望AJAX調用被顛倒過來。在這種情況下，這可能會導致div再次被忽略，或者如果您點擊了幾件事，然後再次點擊，之前的內容將被加載。

我該如何達到這個效果？

來源

2013-04-27 user1721135

保留前幾頁的內容。例如：

var lastPage = $('.result').children().remove(); 
$('.result').load(...);

然後，當你想回去，做這樣的事情：

$('.result').empty().append(lastPage);

這是基本的原則，至少。在實踐中，如果你想讓某人能夠多次回去，那麼你不能只有一個lastPage;你需要做更復雜的事情。

一個更復雜的方式是保持一個對象與訪問的所有前面的頁面的內容（cache）。然後，你可能有一個功能navigate，看起來像這樣：

var cache = {}; 
var currentPageName = /* something */; 
function navigate(newPageName) { 
    cache[currentPageName] = $('.result').children().remove(); 
    if(Object.prototype.hasOwnProperty.call(cache, newPageName)) { 
     $('.result').append(cache[newPageName]); 
     delete cache[newPageName]; 
    }else{ 
     $('.result').load(newPageName + ' #content'); 
    } 
    currentPageName = newPageName; 
    history.pushState(newPageName, newPageName, newPageName); 
}

然後在onpopstate你可以使用navigate爲好。

來源

2013-04-27 23:00:45 icktoofay

Ty，我會長時間關注一下。但是，如何確定用戶是否已在瀏覽器中點擊後退或前進？那麼我怎麼知道加載哪個頁面？ – user1721135 2013-04-27 23:13:33

@ user1721135：你的'onpopstate'處理程序是通過你傳遞給'pushState'的'state'參數來調用的。 – icktoofay 2013-04-27 23:14:12

可能是一個愚蠢的問題，但我會通過什麼狀態例如？ currentPageName？ – user1721135 2013-04-27 23:24:05

您需要手動修改瀏覽器歷史記錄。有這樣的庫。

見What's the best library to do a URL hash/history in JQuery?

來源

2013-04-27 22:59:27 cirrus

thx但我不想要任何哈希值，我想要正常的/index.html類型的URL。 – user1721135 2013-04-27 23:14:44

你不*有*使用散列:)但我會選擇一個庫，它可以給你更好的跨瀏覽器支持，而不是直接使用onpopstate和window.history。 – cirrus 2013-04-27 23:33:45

thx生病檢查出來。我也發現了pijax.js，這看起來相當不錯 – user1721135 2013-04-28 00:36:22

如何在後退按鈕單擊時反轉AJAX動作？

回答

相關問題