用戶單擊后退或前進按鈕時運行jQuery ajax函數

Question

我有以下示例，當用戶單擊導航行時，它使用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();

            $('<div id="uiLoader"></div>').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() });

                }
            });

        });

    },

但是，當用戶單擊后退或后退按鈕時，它將更改網址和標題（因為插件支持此功能），但內容不會更改！ 我如何檢測到這一點，以便我可以使用例如$('location').att('pathname');讀取新網址$('location').att('pathname'); 然后做一些更多的ajax？

例如：

//IF back button or forward button clicked or relevant function e.g 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() });

                }
            });
});

Answer 1

你需要附加到window.onpopstate事件：

$(window).on("popstate", function (evt) { // use bind() for jQuery < 1.7
    /* ... */
});

工作演示： http ： //jsfiddle.net/AndyE/CZwQB/ （使用DOM方法代替jQuery）

• https://developer.mozilla.org/en/DOM/window.onpopstate