用户单击后退或前进按钮时运行jQuery ajax函数
我有以下示例，当用户单击导航行时，它使用AJAX加载某些内容，并使用jquery history.js https://github.com/browserstate/History.js/插件更新url和title一些HTML5历史。
ajaxNav: function () { $('#uiTabs li a, .ajax').live('click', function (e) { e.preventDefault(); $('').appendTo('body').hide().fadeIn(); var url = $(this).attr('href'); var bodyid = $(this).data('body'); $.ajax({ url: url, timeout: 5000, success: function (responseHtml) { isAjaxNav = true; var content = $(responseHtml).find('#ajax-nav-html'); $('.uiContent > .uiPadding').html(content.hide().fadeIn('slow')); History.pushState(null, $(responseHtml).filter('title').text(), url); $('body').attr('id', bodyid); $('#uiLoader').fadeOut(function () { $('#uiLoader').remove() }); }, error: function (jqXHR, textStatus, errorThrown) { if (textStatus == 'timeout') { uiModal.errorTimeoutModal(jqXHR, textStatus, errorThrown); } else if (jqXHR.status == "500") { uiModal.error500Modal(jqXHR, textStatus, errorThrown); } else if (jqXHR.status == "404") { uiModal.error404Modal(jqXHR, textStatus, errorThrown); } else { uiModal.errorUnknownModal(jqXHR, textStatus, errorThrown); } $('#uiLoader').fadeOut(function () { $('#uiLoader').remove() }); } }); }); }, 但是，当用户单击后退或后退按钮时，它将更改url和标题（因为插件支持此function）但内容不会更改！ 我如何检测到这一点，以便我可以使用例如$('location').att('pathname');读取新url$('location').att('pathname'); 然后做一些更多的ajax？
例如：
//IF back button or forward button clicked or relevant function eg backspace $().click(function() { // Get the current url when the back or forward button was clicked var url = $('location').att('pathname'); $.ajax({ url: url, timeout: 5000, success: function (responseHtml) { isAjaxNav = true; var content = $(responseHtml).find('#ajax-nav-html'); $('.uiContent > .uiPadding').html(content.hide().fadeIn('slow')); History.pushState(null, $(responseHtml).filter('title').text(), url); $('body').attr('id', bodyid); $('#uiLoader').fadeOut(function () { $('#uiLoader').remove() }); }, error: function (jqXHR, textStatus, errorThrown) { if (textStatus == 'timeout') { uiModal.errorTimeoutModal(jqXHR, textStatus, errorThrown); } else if (jqXHR.status == "500") { uiModal.error500Modal(jqXHR, textStatus, errorThrown); } else if (jqXHR.status == "404") { uiModal.error404Modal(jqXHR, textStatus, errorThrown); } else { uiModal.errorUnknownModal(jqXHR, textStatus, errorThrown); } $('#uiLoader').fadeOut(function () { $('#uiLoader').remove() }); } }); });
您需要附加到window.onpopstate事件：
$(window).on("popstate", function (evt) { // use bind() for jQuery < 1.7 /* ... */ });
工作演示： http ： //jsfiddle.net/AndyE/CZwQB/ （使用DOM方法代替jQuery）