Ausführen einer jQuery-Ajax-Funktion, wenn der Benutzer auf die Schaltflächen Zurück oder Vorwärts klickt

Question

Ich habe das folgende Beispiel, wo, wenn ein Benutzer eine Navigationszeile klickt es lädt in einigen Inhalt mit AJAX und aktualisiert auch die url und Titel mit der jquery history.js https://github.com/browserstate/History.js/ Plugin, um eine HTML5-Geschichte zu erstellen.

 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() });

                }
            });

        });

    },

Wenn ein Benutzer jedoch auf die Schaltflächen "Zurück" oder "Weiter" klickt, werden die URL und der Titel geändert (da das Plugin dies gut unterstützt), aber der Inhalt wird nicht geändert! Wie kann ich dies erkennen, so dass ich die neue URL lesen kann, indem ich zum Beispiel $('location').att('pathname'); dann noch mehr Ajax machen?

So zum Beispiel:

//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

Sie müssen sich an die window.onpopstate Veranstaltung:

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

Arbeits-Demo: http://jsfiddle.net/AndyE/CZwQB/ (verwendet DOM-Methoden anstelle von jQuery)

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