Question

我在点击链接时使用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 > *");

};

Answer 1

如何在单击后退按钮时再次加载内容？

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

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

不幸的是，你不能用.load来做这件事，因为它返回'originator'jQuery对象。但是，如果您将其转换为更低级别的$.ajax调用（success函数应将响应加载到带有.html()的元素中，则可以在返回的jqXHR上调用.abort对象

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

1 个答案: