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';
});

Answer 1

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