Alert and confirm not working in iOS 9.3 and above

I have developed a web application with three pages (home.html,page1.html and page2.html) . On opening the web app on safari , home.html is opened . Inside home.html , a frameset tag loads page1.html in it . Page1.html contains a button , clicking on which page2.html is loaded in the frameset. In Page2.html , a button is present , clicking on which an alert is displayed. When I am navigating to page2.html and clicking on the alert button , an alert message is displayed. When I click on the back button of safari , page1.html is displayed . Then, to go to the next page I click on the next button of safari and page2.html is displayed . Now when I click on the alert button , no alert is displayed . However, the lines after alert or confirm are working. The same issue is occuring for confirm as well.

So whenever in the application I have presssed the back button , all the alerts and confirm stop working in the application. This behaviour is only observed with iOS versions 9.3 and above. I have shared below, code of the three pages of my webApp . How do I go about fixing it?

home.html

<html>


<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

  <title>Pfizer Belgium</title>
  <script type="text/javascript" src='./Scripts/jquery.min.js'></script>
  <script>
window.onunload = {};



  </script>
</head>


<frameset scrolling="NO" rows="*" frameborder="0" framespacing="0">
  <frame name="Body" id="myFrame" src="./page1.html">
  <noframes>
    <body bgcolor="#FFFFFF">
      <p>Your browser doesn't support frames. Please call your administrator to upgrade it.</p>
    </body>
  </noframes>
</frameset>


</html>

page.1html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">


    <title>Demo</title>
</head>
<body>
<h1>Page 1</h1>
     <button onclick="loadPages()">Go to 2nd page</button><br />
   <button onclick="loadPages4()">rasir back not working</button><br />
   <button onclick="loadPages5()">rasir back working</button><br />

   <div id="testField"></div>
    <input type="hidden" id="cacheTest" />

   <script type="text/javascript" src='./Scripts/jquery.min.js'></script>
   <script>
   window.onunload = {};

   function loadPages(){
    //document.getElementById('test').value = 'ok' + event.persisted+'loadPages';

            var loc = "/page2.html";
            window.top.document.getElementsByTagName('frame')[0].src = "http://10.97.144.77/page2.html"
        }
  function loadPages4(){
    //document.getElementById('test').value = 'ok' + event.persisted+'loadPages';

            var loc = "/page2.html";
            window.top.document.getElementsByTagName('frame')[0].src = "http://10.97.144.77/page4.html"
        }

  function loadPages5(){
    //document.getElementById('test').value = 'ok' + event.persisted+'loadPages';

            var loc = "/page2.html";
            window.top.document.getElementsByTagName('frame')[0].src = "http://10.97.144.77/page5.html"
        }

  jQuery(document).ready(function(){
  
   /jQuery('.BonusBtUpdateBlue').click(function(){
        console.log('button clicked');
        document.getElementById('testField').innerHTML = 'button clicked';
   });

   document.getElementsByClassName('BonusBtUpdateBlue').onclick = function(){
       console.log('did stuff #1');
       document.getElementById('testField').innerHTML = 'bdid stuff #1';
   };*/
  
  var input = document.querySelector('#cacheTest')


  if (input.value === "") {
    // the page has been loaded from the server,
    // equivalent of persisted == false
    console.log('Page has been loaded from server');
    document.getElementById('testField').innerHTML = 'Page has been loaded from server';
  }
  else {
    // the page has been loaded from the cache,
    // equivalent of persisted == true
    console.log('Page is from cache reload the page');
    document.getElementById('testField').innerHTML = 'Page is from cache reload the page';
        window.location.reload(true);
  }


  // change the input value so that we can detect
  // if the page is reloaded from cache later
  input.value = "some value";

});

   </script>
</body>
</html>

page2.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">


    <title>Demo</title>
  <script type="text/javascript" src='./Scripts/jquery.min.js'></script>
  <script>
  window.onunload = {};


jQuery(document).ready(function(){
   
  
   
  var input = document.querySelector('#cacheTest')


  if (input.value === "") {
    // the page has been loaded from the server,
    // equivalent of persisted == false
    console.log('Page has been loaded from server');
    document.getElementById('testField').innerHTML = 'Page has been loaded from server';
  }
  else {
    // the page has been loaded from the cache,
    // equivalent of persisted == true
    console.log('Page is from cache reload the page');
    document.getElementById('testField').innerHTML = 'Page is from cache reload the page';
        window.location.reload(true);
  }


  // change the input value so that we can detect
  // if the page is reloaded from cache later
  input.value = "some value";



}); 


function alertFunc(msg){
  console.log('showing the message');
  setTimeout(function(){alert('not broken!');},200);
  document.getElementById('testField').innerHTML = 'alert is clicked';
}






  </script
</head>
<body>
<h1>Page2</h1>
     <button id="doAlert" onclick="alertFunc('the alert message');">Open alert message</button>
<div id="testField"></div>
    <input type="hidden" id="cacheTest" />
</body>
</html>