Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Mobile Safari back button [duplicate]

The issue I've found is very similar to this question, except that Safari on desktops seems to have resolved the issue. Essentially, the issue is this: when a client is browsing on mobile safari and the page executes a javascript function on pageA.html, then navigate to pageB.html, then press the back button to go back to pageA.html, the javascript function won't run when the client pressed the back button to come back to pageA.html. It will skip the javascript call.

I've tried the solutions mentioned in the link above, but nothing seems to work for mobile Safari. Has anyone else encountered this bug? How did you handle it?

like image 724
Sal Avatar asked Aug 16 '12 00:08

Sal


1 Answers

This is caused by back-forward cache. It is supposed to save complete state of page when user navigates away. When user navigates back with back button page can be loaded from cache very quickly. This is different from normal cache which only caches HTML code.

When page is loaded for bfcache onload event wont be triggered. Instead you can check the persisted property of the onpageshow event. It is set to false on initial page load. When page is loaded from bfcache it is set to true.

window.onpageshow = function(event) {     if (event.persisted) {         alert("From back / forward cache.");     } }; 

For some reason jQuery does not have this property in the event. You can find it from original event though.

$(window).bind("pageshow", function(event) {     if (event.originalEvent.persisted) {       alert("From back / forward cache.");     } }); 

Quick solution to these problem is to reload the page when back button is pressed. This however nullifies any positive effect back / forward cache would give.

window.onpageshow = function(event) {     if (event.persisted) {         window.location.reload()      } }; 

As a sidenote, you can see lot of pages offering using empty onunload handler as solution. This has not worked since iOS5.

$(window).bind("unload", function() { }); 
like image 111
Mika Tuupola Avatar answered Sep 20 '22 18:09

Mika Tuupola