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

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

How can i load the content again when the back button is clicked?

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

And how can i stop/cancel existing Load when a new link is clicked?

不幸的是，您无法使用 .load 执行此操作，因为它返回“发起者”jQuery 对象。但是，如果您将其转换为更底层的 $.ajax 调用(其中 success 函数应该使用 .html() 将响应加载到元素中>，您可以对返回的jqXHR对象调用.abort。