Problems with Page Cache in iOS 5 Safari when navigating back / unload event not fired
I was also looking for an answer to the same issue. Going back in iOS 5 does not execute any javascript and just leaves the page in the previous state it was when you left or were redirected.
Trying the weird "onunload" hack found in "Is there a cross-browser onload event when clicking the back button?" only worked for iOS 4, not iOS 5 which does not call the event as expected. Nickolay pointed out new functions on web-kit called "pageshow" and "pagehide" which are much more reliable than Giuseppe's example.
- You need the hack from this article: "Is there a cross-browser onload event when clicking the back button?" for this to work in iOS 4.
Use this script which uses the new event to safely check if the page was loaded from cache and force a reload (avoiding URLs checks and local storage and also include iPods) for iOS 5:
<body onunload="">...<script type="text/javascript">if ((/iphone|ipod|ipad.*os 5/gi).test(navigator.appVersion)) { window.onpageshow = function(evt) { // If persisted then it is in the page cache, force a reload of the page. if (evt.persisted) { document.body.style.display = "none"; location.reload(); } };}</script>
I'm meeting the same problem.
On iOS4, when you navigate homepage.html to 2.html, then back to homepage.html, the js will not be called. when you navigate homepage.html to 2.html, from 2.html you continue going to 3.html, and then back from 3 to 2 to homepage, the JS will be called! Yes, It's terrible!
But on iOS5 MobileSafari, It always cannot be called :( Maybe this is a cache bug on iOS5. I tested on iOS 5.0.0 and 5.0.1, got the same result.
But when you implement the onUnload event on body element, it can fix the backforward problem on previous MobileSafari.I simply changed the <body> to <body onUnload=""> in homepage.html, then from homepage to 2.html, when going back to homepage, the javascript on homepage will be called. It works on FF, Desktop Safari, Mobile Safari(iOS4)
So, how can we do on iOS5? Unfortunately I have not found a solution. But my webapp runs in a native client, I fixed this by adding a reload() call from native:
if (isOS5_) { [webView stringByEvaluatingJavaScriptFromString:@"location.reload();"]; }when webViewDidFinishLoad:
on my mobile site, I have fixed the problem with this small JS Code:
if ((/iphone|ipad.*os 5/i).test(navigator.appVersion)) { window.onload=function () { localStorage.setItem("href",location.href); }; window.onpopstate=function () { var a=localStorage.getItem("href"), b=location.href; if (b!==a&&b.indexOf((a+"#"))===-1) { document.body.style.display="none"; location.reload(); } };}Scenario:
Clicking the link “Page2” from “Page1”: Once clicked “Page1” gets closed,“Page2” is loaded and fires the onload and many other events.
[Page1] -> click the link -> [Page2] -> onload -> onpopstate -> ...
At this point if you click on the back button of your browser, “Page2” getsclosed and “Page1” is loaded and fires the onload and many other events.
[Page2] -> click on the back button -> [Page1] -> onload -> onpopstate -> ...
Clicking the back button in IOS5 makes closing “Page1” and “Page2” appears butthe page is not loaded, the viewport scale gets corrupted and the only eventfired is onpopstate.
[Page2] -> click on the back button -> [Page1] -> onpopstate.
The Fix:
The fix works around the events onload, onpopstate and the localStorage object.
onload is the first event managed by the script, and within this it stores thecurrent location.href on localStorage.
If there is not any bug, in onpopstate the current location.href and the hrefstored must be the same and the script should do nothing.
Using Safari on IOS5 the page is not loaded and onload event is not fired, thenlocation.href and the stored href are different in onpopstate event.
In this case just hide the current page (for another bug in viewport related tothis) and reload the page with location object.