如何在后退按钮单击时反转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动作？

回答

相关问题