0

I have an HTML5 application that manipulates the browser history to show the proper URL for Ajax calls. This works great, but a problem occurs when my application has hyperlink to an external site, say http://www.google.com. When this happens, the history looks like this:

My App Page A -> My App Page B -> Google

When the user hits the back button once, everything is fine. My App Page B is shown.

But when the user hits the back button a second time, the URL changes, but the page doesn't change. My app can't make the proper Ajax call to show the state for My App Page A, because the onpopstate handler never got called. This is because the handler wasn't initialized when the browser went back to My App Page B (no events fire on that back event, so I can't reinitialize the handler.)

This experience is with Chrome, but I have no reason to believe it is Chrome-specific. Is there a way around this problem?

I know that applications like Gmail open all external hyperlinks in a new window. But the requirements for my application don't allow me to do that.

davidgyoung
  • 63,876
  • 14
  • 121
  • 204
  • 1
    You should use an onload handler in addition to the popstate handler, and you [may need some unload handler](http://stackoverflow.com/questions/158319/cross-browser-onload-event-and-the-back-button) to break the browser cache. – user123444555621 Jun 16 '12 at 20:32
  • I don't understand why `onpopstate` never got called. It should be called every time the user changes the location. – Derek 朕會功夫 Jun 16 '12 at 21:36

2 Answers2

2

The link provided by @Pumbaa80 put me on track to the right answer.

If you put <body onunload=""> on your page, then is breaks the bfcache on Chrome and other browsers. This means that when you click the back button to return to My App Page B from Google, all page state JavaScript events will fire.

There is no way to get onpopstate to get called on My App Page B after coming back from Google. (This woud be illogical, as that event only fires on the page where you hit the back button.)

The alternative is to execute the logic when My App Page B loads. By breaking the bfcache as described above, jQuery dom ready will fire. By running similar code from onpopstate in a jQuery dom ready callback, I can access the data stored in the History object reset the state of my HTML5 web app after returning from an external page.

davidgyoung
  • 63,876
  • 14
  • 121
  • 204
0

I think you'll need to use hash tags to save the state of your page, I don't see a way around this. I've done it in the past with great success using this jQuery plugin, with the very fashionable name BBQ (Back Button & Query library). This will allow your page to perform actions based on the hash tags in the URL.

ohaal
  • 5,208
  • 2
  • 34
  • 53
  • Looks like you don't know about HTML5's pushState can save state: https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history#The_pushState().C2.A0method – Derek 朕會功夫 Jun 16 '12 at 21:35
  • @Derek: That looks great, thank you for the heads up, will definitely use that in the future. I do however see that the support for it is not optimal just yet, lacking IE9 and below which account for alot of traffic. Ref: http://caniuse.com/#search=pushState - My solution could at least serve as a fallback. – ohaal Jun 16 '12 at 22:23