Pracuję nad małym projektem, w którym chcę stworzyć stronę w stylu Ajax. Treść jest ładowana za pomocą jQueryload(). Jak niektórzy z was wiedzą, wadą tego jest to, że adres URL nie zmienia się odpowiednio do wyświetlanej treści. Aby wykonać tę pracę, możesz z niej skorzystaćpushState(). Ponieważ nie jest obsługiwana przez różne przeglądarki, użyłem wtyczkihistory.js.

Działa to całkiem dobrze, ale problem polega na tym, że moje przyciski wstecz i do przodu nie działają tak, jak powinny i nie mam pojęcia, co robię źle. Adres URL zmienia się poprawnie, a zawartość jest również prawidłowa, ale tytuł w ogóle się nie zmienia. Z tytułem mam na myśli to, co jest wyświetlane jako tytuł okna (lub karty) okna przeglądarki. To znaczy.<title> załadowanej strony LUB atrybut tytułu łącza, które odnosi się do tej strony (są takie same). Myślę, że ma to związek z faktem, że nazywam tylko część strony, której tytuł potrzebuję (tzn. Dodając#content doload()). Nadal chcę tytuł tej strony. Oto przypadek testowy tego, co mam do tej pory. (Niedostępne już od 28 grudnia 2013 r.). Plik jQuery:

$(document).ready(function () {
    var firstLink = $("ul > li:first-child > a");
    var menuLink = $("ul > li > a");
    var firstLoadedHtml = firstLink.attr("href") + " #content";

    $("#sectionContainer").hide().load(firstLoadedHtml).fadeIn("fast");
    firstLink.addClass("active");   

    menuLink.click(function(e) {
        history.pushState(null, null, this.href);

        e.preventDefault();
        e.stopImmediatePropagation();

        var CurLink = $(this);
        var newLoadedHtml = CurLink.attr("href") + " #content";
        var oldSection = $(".contentPage");

        $("#sectionContainer").hide().load(newLoadedHtml).fadeIn("fast");
        menuLink.removeClass("active");
        CurLink.addClass("active");
    });

    $(window).bind('popstate', function() {
            var returnLocation = history.location || document.location;

            $('#sectionContainer').load(returnLocation + "#content");
    });
});

Zauważyłem również, że wracając na stronę podstawową (tj. / SectionLoaderTest /), na chwilę gaśnie i dopiero po chwili ładowana jest zawartość pierwszej strony. Czy istnieje sposób na zoptymalizowanie tego?

Ponadto używam jQuery, aby dodać aktywną klasę do klikniętego łącza. Jak mogę się upewnić, że zmieni się to odpowiednio do historii? Aby podświetlić poprawny link, gdy użytkownik nawiguje wstecz?

Trzy pytania to:

Uzyskaj tytuł podczas pracy do przodu i do tyłuZoptymalizuj czas ładowania strony głównejNapraw klasę aktywną podczas przechodzenia do przodu i do tyłu

Wszystko mile widziane!

NOTATKA 1: Chciałbym zbudować na history.js i moim własnym skrypcie i jako taki utrzymać wsparcie dla< HTML5 przeglądarki. Wolałbym to, ponieważ 1. Wiem, że to musi zadziałać, jest po prostu coś, co idzie źle. 2. Oszczędziłbym czas, gdybym widział swoje rozwiązanie i zaimplementował je w skrypcie, który już napisałem, a nie wymyślając zupełnie nowy skrypt.

UWAGA 2: Nagroda zostanie przyznana tylko onowi, który może odpowiedzieć na wszystkie moje pytania (3)!