Strona "Przekierowanie" bez odświeżania (styl zdjęć na Facebooku)

Question

Próbuję zaimplementować przeglądanie zawartości tak, jak dzieje się to na Facebooku, gdy użytkownik przegląda zdjęcia. Sądzę, że każdy jest zaznajomiony z przeglądaniem zdjęć, w którym można kliknąć "następny" i "poprzedni" i natychmiast uzyskać następne lub poprzednie zdjęcie (można również nawigować za pomocą klawiszy strzałek).

Po kliknięciu "Dalej" na przykład zauważysz, że strona nie odświeża się - tylko zawartość. Na początku myślałem, że jest to wykonywane przy użyciu zwykłych wywołań ajaxowych, które odświeżają tylko "treść" w tym przypadku obraz, opis i komentarze. Ale potem zauważyłem, że adres URL na pasku narzędzi "Lokalizacja" mojej przeglądarki został zmieniony! Próbowałem sprawdzić to za pomocą Firebuga i odkryłem, że po kliknięciu "dalej" tylko kolejne zdjęcie zostanie pobrane i nadal nie wiem skąd pochodzą meta dane obrazu (opis, czas, tagi, ...) załadowany.

Czy ktoś może wyjaśnić, jak ta technika jest wykonywana - zmiany adresu URL strony bez odświeżania strony (lub nawet bez "migania" strony, jeśli odświeża się z pamięci podręcznej). Wiem, jak zmienić zawartość strony za pomocą ajax, ale URL tej strony pozostaje taki sam przez cały czas. Jeśli kliknę przycisk "odśwież", otrzymam ponownie pierwszą stronę. Ale nie na Facebooku, ponieważ nawet "window.location" zmienia się za każdym razem bez rzeczywistego przekierowania.

Inną rzeczą, którą zauważyłem jest to, że dolny pasek narzędzi (aplikacje, czat, ...) jest "zawsze na wierzchu". Nawet jeśli zmienisz stronę, ten pasek narzędzi nie jest odświeżany i zawsze pozostaje na wierzchu - nawet nie "miga" tak jak inne strony, które są odświeżane (z serwera WWW lub z lokalnej pamięci podręcznej). Chyba jest to ta sama technika co powyżej - jakieś "fałszywe" przekierowania czy coś takiego?

odpowiedź jest pushState

if (window.history.pushState) 
    window.history.pushState([object or string], [title], [new link]); 

Będziesz uśmiechnąć :)

Answer 1

Próbowałem zmienić za pomocą obrazów Facebooku, a to, co widziałem:

W Firefoksie :

Adres URL strony się nie zmienia. Zmienia się tylko skrót. This is a technique used to allow crawlers to index the content. Co się dzieje, jest to:

• Użytkownik klika na „next”
• JS ładuje następny obraz z tagami, komentarze, etc i zastępuje starą treść z nimi.
• JS zmienia hash odpowiadać nowy obraz

URL wyglądać tak: http://www.facebook.com/home.php?#!/photo.php?fbid=1550005942528966&set=a.1514725882151300.28042.100000570788121&pid=3829033&id=1000001570788121 (Zawiadomienie hash)

Jeśli chodzi o drugie pytanie, to tylko jedna z zalet tej techniki powyżej. Kiedy jesteś na Facebooku, strona rzadko jest odświeżana. Zmieniany jest tylko skrót, dzięki czemu można wysyłać łącza do innych osób, a roboty indeksujące mogą indeksować zawartość.

W Google Chrome:

Wydaje tamtędy chrom hassome aby zmienić adres URL bez odświeżania strony. Czyni to za pomocą window.history.pushState. Przeczytaj o tym here.

URL wyglądać tak: http://www.facebook.com/photo.php?fbid=1613802157224343&set=a.1514725288215100.28042.1000005707388121&pid=426541&id=1000001570788121 (zauważ, że nie ma skrótu tutaj, ale nadal URL zmienia się wraz z obrazów)

W Epiphany:

Epiphany nie zmienia URL przy obraz się zmienia.

URL wyglądać tak: http://www.facebook.com/photo.php?fbid=1441817122377521&set=a.1514725882215100.28042.1000005707848121&pid=3251944&id=1000200570788121 (nie ma krzyżyka, a adres URL pozostaje taka sama w przypadku zmiany obrazu)

(nie mają inne przeglądarki, aby zweryfikować teraz)

Answer 2

Możesz zauważony że URL strony pozostaje taki sam. Zmienia się jednak hash strony (część po # w adresie URL).

Trzeba coś takiego: http://code.google.com/p/reallysimplehistory/

Answer 3

Jedna technika nie tutaj wymienione jest metoda (obsługiwane w IE8 + i większość innych), które mogą być używane