Reload previous page's JavaScript on mobile

Question

I'm testing a template where each page has an opacity set to 0 and gets it set to 1 on page load with an event listener so that it appears to fade-in.

The issue I have is that when I hit "back" on mobile devices (namely iPhone 5) the JS won't execute, leaving the page with its 0 opacity.

I guess that the way it's done is to save bandwidth, but isn't there a way to force the browser to execute its JS even when hitting "back"?

Basic example of the code:

window.addEventListener('load', function() {
  someelement.style.opacity = '1';
});

Updated with a basic example. Timers won't fire as the JS is simply not executed again. It's also important to note that it's not an error with my JS, rather a specific behavior on mobile devices. — Ronan, Aug 20 '14 at 09:18
@serakfalcon There is a `no-js` class which adds an `opacity:1` to concerned elements. — Ronan, Aug 20 '14 at 09:25
I just had this problem today and found the answer in this thread: http://stackoverflow.com/questions/24046/the-safari-back-button-problem — e.marten, Aug 20 '14 at 09:42

score 1 · Answer 1 · edited May 23 '17 at 10:33

I think I've found the best solution, coming from this thread:

function Reload() {
  try {
    var headElement = document.getElementsByTagName("head")[0];
    if (headElement && headElement.innerHTML)
      headElement.innerHTML += " ";
  } catch (e) {}
}

if ((/iphone|ipod|ipad.*os 5/gi).test(navigator.appVersion)) {
  window.onpageshow = function(evt) {
    if (evt.persisted) {
      document.body.style.display = "none";
      location.reload();
    }
  }
}

This works perfectly. Other solutions didn't worked or showed some inconstancies for me. See documentation for the onpageshow event

Reload previous page's JavaScript on mobile

1 Answers1