1

我试图找出历史 API，但在阅读文档后，我几乎什么都不懂。

例如，我有以下 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");

这个我明白。点击某物，更改网址。单击返回，将 url 更改回来。

但我想，如果在 AJAX 单击后单击后退按钮，我希望 AJAX 调用被反转。在这种情况下，这将是结果 div 再次为空，或者如果您单击了几个内容然后单击返回，则要加载以前的内容。

我将如何实现这种效果？

4

2 回答 2

1

保留前几页的内容。例如：

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-27T23:00:45.597 回答
1

您需要手动修改浏览器历史记录。有这方面的图书馆。

请参阅在 JQuery 中执行 URL 哈希/历史记录的最佳库是什么？

于 2013-04-27T22:59:27.137 回答