JQuery - Handling Browser Back Button

[1DMF]

I'm redesigning my site to use a new tab control widget I have built.

The problem I have is the widget not remembering what tab was active should the user click a link from the widget, then use the browser back button.

Doing some investigating last night, I found it is a major issue, as $(document).ready fires all the time in Chrome when back is clicked but not in FireFox.

Apparently FireFox uses a BFCache (Back/Forward Cache), so it remembers DOM state and so doesn't re-trigger $(document).ready. I've tried $(window).load but again doesn't re-fire in FireFox either.

What I have found is this thread :

http://stackoverflow.com/questions/158319/cross-browser-onload-event-and-the-back-button

So I have implemented this

jQuery(window).bind("unload", function(){));

Which from my initial Linux tests does force FireFox to rerun $(document).ready (yet to test on Windows & IE).

So I now have my widget rendering routine, which uses cookies to store widget state as well as load widget state, which works perfectly.

However, I would rather if possible allow browsers that have a BFCache to use it, so some of my AJAX calls requesting JSON don't keep firing, as there is no need to keep making these http requests once the data has been retrieved the first time.

So although using my current 'hack' solves some of my problems, it creates others.

So is this currently the only way to get JavaScript to fire every time the page is rendered whether being reached via a direct landing page or the browser back button.

I was considering using a cookie to store the fact the page was initially loaded, and then using this as a flag for if certain code needs to run again.

How do you deal with JQuery apps and browser back buttons?

Thanks,
1DMF



"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music

 

[jpadie]

could you not store the current tab state in jQuery local storage and test it every few secs?
likewise store the results of your ajax queries in local storage with a timestamp. so the first thing that your code does is decide whether the data is too told and whether to refresh it. then instead of reading from the server, it reads from localstorage. keeps your code changes low.

 

[1DMF]

hmm, looks like I need to look into JQuery local storage, is this some structured cookie store?

The click event on the tab, currently updates a cookie of the tab widget state.

The problem with any of this is code needs to run when a page is loaded from BFCache, to move the widget to the last active tab.

NO JS code runs when a page is loaded from the FF BFCache, unless you know of a way?

I've even tried the 'onShow' event but that doesn't appear to work either?

"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music

 

[jpadie]

i'm pretty sure that when a page goes into BFcache everything gets frozen, not killed. so timers and other js code will still work.

also the pageshow event (in ff) will refire when a page comes out of bfcache.

could either of those observations/suppositions help?

 

[1DMF]

Hi Justin,

i'm pretty sure that when a page goes into BFcache everything gets frozen, not killed. so timers and other js code will still work.

Yes, for sure, and I guess I could use a timeout to check if the current active widget tabs are the ones stored in the cookie.

But that would mean having a timer constantly running every second, as you would want it to restore the widget state the second you clicked back.

I don't like the idea off a timer firing constantly to check something that happens occasionally (well far less frequent than the required checking)

also the pageshow event (in ff) will refire when a page comes out of bfcache.

The little playing I tried on Linux FireFox didn't seem to work, but I may not have configured the event correctly.

I'll have another play at home tonight to see if I can get something working across platforms.

Google chrome appears to wipe everything and rerun all JS code again regardless, on both Linux and Windows.

Where as IE11 currently is working perfectly with the BFCache and even my current 'onunload' event doesn't stop IE BFCaching , so no JS is rerun when the back button is pressed and the widget state is perfectly preserved by IE.

I think I need to add additional browser detection, as there are so many discrepancies between the browsers and the platform OS they run on.

1DMF





"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music