jQuery单击后退按钮时如何加载内容答案

【问题标题】：jQuery how to load content when back button is clickedjQuery单击后退按钮时如何加载内容
【发布时间】：2012-12-24 21:22:55
【问题描述】：

我正在使用 jQuery 在单击链接时加载页面内容，

$(document).on('click', 'nav a', function (e) {
    e.preventDefault();

    var url = $(this).attr("href");
    window.history.pushState('', '', url);
    url += " #main_wrapper > *";

    $('#main_wrapper').load(url);

});

问题是当我点击后退按钮时，URL 发生了变化，但什么也没有发生。当点击后退按钮时，如何再次加载内容？

当点击新链接时如何停止/取消现有加载？

谢谢。

编辑：

这就是我实现的方式，您可以根据需要轻松修改。

window.onpopstate = function(event) {

    $('aside nav a').removeClass('active');
    $('a[href="' + document.location + '"]').addClass('active')

    $('#main_wrapper').load(document.location +" #main_wrapper > *");

};

【问题讨论】：

标签： jquery ajax jquery-load

【解决方案1】：

点击后退按钮后如何再次加载内容？

您需要将事件处理程序分配给popstate 事件以处理“返回”按钮按下，如here 所述。使用此处理程序，您可以分析当前历史状态并相应地扩充您的页面。

当点击新链接时如何停止/取消现有加载？

不幸的是，.load 无法做到这一点，因为它会返回 'originator' jQuery 对象。但是如果你把它转换成更底层的$.ajax调用（success函数应该将响应加载到带有.html()的元素中，你可以在返回的jqXHR对象上调用.abort。

【讨论】：

谢谢，工作就像一个魅力。