1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 9:19 pm May 13, 2026

Forum Moderators: open

Message Too Old, No Replies

Javascript Autorefresh timer on inactivity with warning box to cancel

Can't get the browser to recognize mousemovement or key presses

         

erin0201

4:01 pm on Jun 28, 2011 (gmt 0)

10+ Year Member



I am fairly new to working with javascript and am working on an intranet site for my company. I have a page that loads an external employee information site inside of an iframe. I have modified the code on this page to autorefresh the page after a countdown from a certain period of inactivity if no cancel button is pressed when the warning is displayed.
Original code example:
[beyondfusion.com ]

However, while the countdown works and the cancel button works, the browser is ignoring my requests such as onmousemove onkeydown onmouseup etc to reset the timer as the code is showing.

Any ideas or suggestions?
Thanks!

Below is my code: 
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="adp.aspx.vb" Inherits="adp2" %>

<!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></title>
 <link href="~/Styles/site.css" rel="stylesheet" type="text/css" />
 <script language="javaScript" type="text/javascript">
<!--

 //5 minutes = 300000 (1000 ms * 60 seconds * 5 minutes) 1 second = 1000miliseconds
 var autoCloseTimer;
 var timeoutObject;
 var timePeriod = 10000; // 10 seconds
 var warnPeriod = 5000; // 5 seconds

 function promptForClose() {
 autoCloseDiv.style.display = 'block';
 autoCloseTimer = setTimeout("definitelyClose()", warnPeriod);
 }


 function autoClose() {
 autoCloseDiv.style.display = 'block'; //shows message on page
 autoCloseTimer = setTimeout("definitelyClose()", timePeriod); //starts countdown to closure
 }

 function cancelClose() {
 clearTimeout(autoCloseTimer); //stops auto-close timer
 autoCloseDiv.style.display = 'none'; //hides message
 }

 function resetTimeout() {
 clearTimeout(timeoutObject); //stops timer
 timeoutObject = setTimeout("promptForClose()", timePeriod); //restarts timer from 0
 }


 function definitelyClose() {
 
 parent.Iframe0.location.href = "https://URLHERE.com/" 
 }
-->
</script>

</head>
<body onmousedown="resetTimeout();" onmouseup="resetTimeout();" onmousemove="resetTimeout();" onkeydown="resetTimeout();" onload="timeoutObject=setTimeout('promptForClose()',timePeriod);">
 <form id="form1" runat="server">
 <div class="page">
 <div class="header" style="left: 0px; top: 0px">
 <h1>
 
 </h1>
 </div>
 <div class="clear hideSkiplink">
 <asp:TreeView ID="TreeView1" runat="server">
 <Nodes>
 <asp:TreeNode NavigateUrl="~/Default.aspx" Text="Home" Value="Home">
 </asp:TreeNode>
 </Nodes>
 </asp:TreeView>

 <br />
 
 </div>
 
 <div class="leftcolNon">
 <div id='autoCloseDiv' style="display:none">
 <center>
 <p>
 <strong>Inactivity warning!</strong><br />
 This page will reset in 5 seconds unless you hit 'Cancel.'</p>
 <input type='button' value='Reset' onclick='definitelyClose();' />
 <input type='button' value='Cancel' onclick='cancelClose();' />
 </center>

 </div>
 
 </div> 
 
 <div class="mainColNon">
 
 <div class="iframeAdpSite">
 <iframe id="Iframe0" frameborder="0" name="Iframe0" scrolling="auto" src="https://adp.eease.com/" style="width: 764px; height: 1000px">Your browser does not support inline frames or is currently configured not to display inline frames.
</iframe>
 </div> 
 
 </div>
 <div class="rightcolNon">
 
 </div>
 <!-- </div> -->
 <div class="clear">
 </div>
 <div class="footer">
 </div> 
 </div>
 
 </form>
</body>
</html>

rocknbil

4:38 pm on Jun 29, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Welcome aboard erin0201, remove the onload events from body (just use <body> ) and add the following immediately after var warnPeriod: 


window.onload=function() { 
 document.body.onmousemove=function() { resetTimeout(); } 
 timeoutObject=setTimeout('promptForClose()',timePeriod); 
};


You'll also need to change these three lines:
document.getElementById('autoCloseDiv').style.display = 'block'; (x 2)
document.getElementById('autoCloseDiv').style.display = 'none';

Just tested, appears to do it . . . Also three other tidbits: you don't need the comment tags around JS and don't need the script language attribute. Since you have an ID on the iframe, you can do

document.getElementById('Iframe0').src = "https://yoursite.com/"

Note that the onmousemove event won't fire when over the iFrame though (since it's no longer over the current document body,) you'll probably have to add a second handler for that.

erin0201

11:18 am on Jun 30, 2011 (gmt 0)

10+ Year Member



Hey Bill,

Thanks for your suggestions! I did finally figure out that the clicks and key presses in the iframe wouldn't be noticed by my page and that unfortunately since the site I have loaded in the iframe is on an external site I can't handle the mouse or keyboard movements in it by editing that page.

I experimented with layering a transparent div container over everything that I found suggested in some forums so that I can handle mouse movements that go over that frame, but I couldn't get that to work. I have everything working in IE 8 and Firefox now. Even if I can't control what's in the iframe, I can at least close the window for our kiosks after a certain amount of inactivity and if the person doesn't cancel the timer when the warning pops up.

Here's my updated code in case it helps anyone. And thanks again for the suggestions!
------------- 

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="adp.aspx.vb" Inherits="adp" %>

<!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">
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<%--<meta http-equiv="refresh" content="5; url=index.html" />--%>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="imagetoolbar" content="false" />
 <title></title>
 <link href="~/Styles/site.css" rel="stylesheet" type="text/css" />
<script type="text/VB" runat="server">

 Public Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs)
  ' Stop Caching in IE
  Response.Cache.SetCacheability(System.Web.HttpCacheability.NoCache)

  'Stop Caching in Firefox
  Response.Cache.SetNoStore()
 End Sub
 
</script>
<script type="text/javascript">
 history.forward();
 
</script>

 <script language="javaScript" type="text/javascript">
 
 //5 minutes = 300000 (1000 ms * 60 seconds * 5 minutes) 1 second = 1000miliseconds
  var autoCloseTimer;
  var timeoutObject;
  var timePeriod = 10000; // 10 seconds
  var warnPeriod = 5000; // 5 seconds

  onmouseover = resetTimeout();

  function promptForClose() {
   
   document.getElementById("autoCloseDiv").style.display = 'block';
   autoCloseTimer = setTimeout("definitelyClose()", warnPeriod);
  }


  function autoClose() {
   document.getElementById("autoCloseDiv").style.display = 'block'; //shows message on page
   autoCloseTimer = setTimeout("definitelyClose()", timePeriod); //starts countdown to closure
  }

  function cancelClose() {
   clearTimeout(autoCloseTimer); //stops auto-close timer
   document.getElementById("autoCloseDiv").style.display = 'none'; //hides message
  }

  function resetTimeout() {
   clearTimeout(timeoutObject); //stops timer
   timeoutObject = setTimeout("promptForClose()", timePeriod); //restarts timer from 0
  }


  function definitelyClose() {

   parent.Iframe0.location.href = "https://URLHERE/"
   window.close()
   self.close()
  }

</script>

</head>
<body onmousedown="resetTimeout();" onmouseup="resetTimeout();" onmousemove="resetTimeout();" onkeydown="resetTimeout();" onload="timeoutObject=setTimeout(promptForClose, timePeriod);">
 <form id="form1" runat="server">

 <div class="page">
 <div class="pageCover">
  <div class="header">
    <h1>
    
    </h1>
   </div>
   
   <div class="clear hideSkiplink">
     <asp:TreeView ID="TreeView1" runat="server">
     <Nodes>
      <asp:TreeNode NavigateUrl="~/Default.aspx" Text="Home" Value="Home">
      </asp:TreeNode>
     </Nodes>
    </asp:TreeView>
    <%--<a href="javascript:location.reload(true)">Refresh this page</a>--%>
    <br />
    
   </div>
  
   <div class="leftcolNon">
   <div id='autoCloseDiv' style="display:none">
     <center>
      <p>
       <strong>Inactivity warning!</strong><br />
       This page will reset in <strong>5 seconds</strong> unless you hit <strong>'Cancel.'</strong></p>
      <input type='button' value='Reset' onclick='definitelyClose()' />
      <input type='button' value='Cancel' onclick='cancelClose()' />
     </center>

  </div>
  
  </div> 
  
  <div class="mainColNon">
   
   <div class="iframeAdpSite">
    
<iframe id="Iframe0" frameborder="0" name="Iframe0" scrolling="auto" src="https://URLHERE/" style="width: 764px; height: 1000px">Your browser does not support inline frames or is currently configured not to display inline frames.
</iframe>

   </div>      
 
  </div>
  <div class="rightcolNon">
   
  </div>
  <!-- </div> -->
  <div class="clear">
  </div>
  <div class="footer">
 </div> 
 </div> 
 </div>
 
 </form>
</body>
</html>
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 9:19 pm May 13, 2026