Javascript stops executing in iframe after back button is pressed in mobile safari

Question

I have a web page intended for mobile phones that includes an iframe with links that open in the parent target.

In Safari on iOS 5.0.1, when a user clicks a link, then uses the back button to go back to the page, javascript stops executing within the iframe.

A simple demo to illustrate the problem:

Click the link, confirm the alert and use the back button. The second time you click the link the alert won't show.

index.html:

<html>
  <body>
    <iframe src="iframe.html"></iframe>
  </body>
</html>

iframe.html:

<html>
  <body>
    <a target="_parent" onclick="alert('Click')" href="http://www.google.com">
      Link
    </a>
  </body>
</html>

I'm running out of ideas of what could be causing this. Has anyone run in to this?

score 2 · Answer 1 · answered Jul 06 '12 at 00:12

2

It's a Webkit bug: Location and other objects are dysfunctional after a document gets restored from [back/forward] cache

Adding an empty unload handler seems to avoid the problem in iOS 4 but not iOS 5.

answered Jul 06 '12 at 00:12

sam

35,828
2
38
36

score 2 · Answer 2 · edited May 23 '17 at 11:55

2

check out the answer to Problems with Page Cache in iOS 5 Safari when navigating back / unload event not fired.

The answer that worked for me was to do the following:

<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>

edited May 23 '17 at 11:55

Community

1
1

answered Aug 15 '12 at 19:27

DrewB

2,953
22
21

FYI--this does not work if you apply this to the page inside the iframe, it must be on the overall page hosting the iframe. Or, it could be because my iframe is really embedded within another iframe. Yes, I'm using a third party component. – kamranicus Sep 05 '13 at 15:38
1

Yes, this definitely needs to be on the page that includes the iframe. – DrewB Oct 24 '13 at 22:28

score 2 · Answer 3 · answered Feb 27 '12 at 17:38

I have ran into the same issue. It seems that iPad's Safari snapshots the page and when you go back to it using the back button, it loads that snapshot and javascript code is not being executed.

It seems to be related to this issue: http://www.mac-forums.com/forums/internet-networking-wireless/257631-safari-ipad-back-button-generates-old-info.html

Very annoying. I haven't found a solution yet.

Javascript stops executing in iframe after back button is pressed in mobile safari

3 Answers3