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>