Geek asks and answers

HTML5 History API: Problems Updating and Reverting

I am writing code to create a UX similar to the way photos are viewed on Facebook from the timeline ...

  • View the timeline, click on a photo and open it in modal
  • You are updated and go to the highlighted page for the image.
  • You drop back and you go back to the timeline

Most of this works for me using the HTML5 history API . Here is what I do when I click on the image ...

  • I use preventDefault()to avoid the link (to the image page), and instead AJAX loads the modal image with the image
  • I have the pushStateURI of the image page so that it appears in the address bar
  • Now I am updating, and I got to the page of the selected image (URI from step 2).
  • Then I click the back button and it shows the URI of the previous page (i.e. the timeline) in the address bar, but I'm still on the image page.

Question: In step 4, is there a way to bypass the history API and just make the browser perform the standard “Back” action so that I can return to the previous page (that is, the timeline)?

+5
source share
2 answers

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

0
source

I do it like this:

step 1 - save the starting URL of the page (which has not changed yet)

var savedPageStateURL = window.location.pathname;

2 - ( , )

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

3 -

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

More articles:


All Articles