我有以下示例,当用户单击导航行时,它使用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)
需要了解更多jQuery教程分享用户单击后退或前进按钮时运行jQuery ajax函数,都可以关注jQuery技术分享栏目---计算机技术网(www.ctvol.com)!
以上就是jQuery教程分享用户单击后退或前进按钮时运行jQuery ajax函数相关内容,想了解更多jQuery开发(异常处理)及jQuery教程关注计算机技术网(www.ctvol.com)!)。
本文来自网络收集,不代表计算机技术网立场,如涉及侵权请联系管理员删除。
ctvol管理联系方式QQ:251552304
本文章地址:https://www.ctvol.com/jquerytutorial/981438.html