2012-03-20

Page caching and the HTML5 onPageShow window event

Just last week I was confronted with a problem that occurred only in Firefox. This is rare, since Firefox is very good at implementing HTML/CSS/JavaScript standards. Basically what I had was a report criteria page being displayed to a user and then once he hit the submit button, we pop-up a JavaScript overlay saying "Processing...". Thing is, if the user hits the browser's "Back" button (yes that horrible button), the overlay was remaining, even thought in the window onLoad event we were telling the overlay to unload itself.

I believe the problem starting with a recent version of Firefox where the browser implemented page caching. Subsequently, when the "Back" button is hit, the page is loaded from the cache and the onLoad event is not fired again. So our code to unload the overlay was not being executed.

The solution as I found it, is that in this scenario, Firefox is firing the onPageShow event, giving us a chance to do our clean up work. So we basically added the following line of code in the window onLoad event handler:

$(window).bind( "pageshow", function() { $.unblockUI(); } ); 

We still left the old code there so that it works for other browsers and older versions of Firefox.

2 comments:

HTML5 Player said...

I think in many online instances HTML5 will replace FLASH. However FLASH still holds power as an animation and software development tool. So I think the conclusion will depend heavily on whether or not the community has needs for maintaining web presentations or "stand-alone" applications. I think Adobe will agree that HTML5 is the future of online interactive user interface.html5 music player

Anton Bielousov said...

I have problem with this code on iOS(6) that the first time I leave the page and return back in history the function fires, no problem here.

But if I leave the page again and return to it 2nd time, it doesn't fire. Any ideas?