Search code examples
javascriptjquerymobile-safarijquery-eventsback-button

How do I make a hidden, floating "loading" div hide again from a page after hitting the back button on mobile safari?

Its an iOS problem only.

I have a floating hidden div with "...loading" appear in the current page upon following links within the application. This is again hidden by default on the following page. The problem is that when the user then hits the back button it appears again, unhidden, on mobile safari. This is not a problem on desktop browsers.

This code below works on desktop Firefox, Chrome, and Safari, but not on mobile Safari on iO5 iPhone and iPad.

<body style="margin: 0; padding: 0" onunload="$('#loading').hide()"  onload="setTimeout(function() { window.scrollTo(0, 1) }, 100);">

Any thoughts?

Solution

  • For Safari on iOs you can do this:

    window.addEventListener('popstate', function(e) {$('#loading').hide()});

    Based on this answer: Is there an alternative method to use onbeforeunload in mobile safari?