HTML5 History API: Odśwież iz powrotem wystawia

Question

piszę kod, aby utworzyć UX podobny do tego, jak zdjęcia są wyświetlane na Facebooku z osi czasu ...

1. Przeglądanie osi czasu, kliknij na zdjęcie i to otwiera się w modalne
2. odświeżeniu i idzie do specjalnej strony dla obrazu
3. trafisz z powrotem i wrócić do osi czasu

mam większość tej pracy poprzez HTML5 Hist ory API. Oto, co robię po kliknięciu obrazu ...

1. używam preventDefault() uniknąć następujący link (po stronie obrazu) i zamiast AJAX załadować modalnego z obrazem
2. I pushState URI strony obrazu, aby pojawił się na pasku adresu.
3. Teraz odświeżam i przeniesiemy na stronę dedykowanego obrazu (identyfikator URI z kroku 2)
4. Następnie klikam przycisk "Wstecz", a to pokazuje poprzedni identyfikator URI strony (tj. oś czasu) w pasku adresu, ale wciąż jestem na stronie obrazu.

Pytanie: W kroku # 4, czy jest jakiś sposób na ominięcie historii API i po prostu przeglądarka wykonać standardową „Powrót” działanie, więc mogę wrócić do poprzedniej strony (tzn osi czasu)?

Answer 1

Czy wypróbowałeś dobry modelowany history.go(-1);?

Answer 2

robię to tak:

krok 1 - zachowaj początkowej strony URL (co jest jeszcze niezmieniona)

var savedPageStateURL = window.location.pathname; 

krok 2 - zastąpić aktualny stan Historia (nie pchanie, tylko wymiana)

window.history.replaceState({}, null , url); 

krok 3 - przywrócić zmiany historii i wrócić do stanu Pierwszym krokiem jest

if('pushState' in window.history && window.history.state) 
    window.history.replaceState({}, null , savedPageStateURL);