HTML5历史记录API：刷新和返回问题

Question

I'm writing code to create a UX similar to how photos are viewed on Facebook from the timeline...

1. Viewing the timeline, you click on the photo and it opens in a modal
2. You refresh and it goes to a dedicated page for the image
3. You hit back and you return to the timeline

I have most of this working via the . Here is what I'm doing when clicking an image...

1. I use preventDefault() to avoid following the link (to the image page) and instead AJAX load a modal with the image
2. I pushState the URI of the image page so it appears in the address bar
3. Now I refresh and I'm taken to the dedicated image page (the URI from step #2)
4. Then I hit the "Back" button, and it shows the previous page URI (ie the timeline) in the address bar but I'm still on the image page.

At step #4, is there a way to bypass the history API and just have the browser perform a standard "Back" action so I can return to the previous page (ie the timeline)?

Answer 1

Have you tried a good ol' fashioned history.go(-1); ?

Answer 2

I do it like this:

step 1 - save the initial page url (which is yet unchanged)

var savedPageStateURL = window.location.pathname;

step 2 - replace current history state ( not pushing, only replacing)

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

step 3 - revert history changes and go back to the first step's state

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