We’ve all experienced the frustration of having a session expire on us, possibly losing your work because you needed to take a phone call, or you got side tracked by an email that you needed to get out quickly, only to return to a form you were filling in and have it log you out, losing all your past work.
This maybe isn’t such a big deal for day to day web sites, but when at work, using a system that you have open all the time and use all day every day, having a 20 minute session time out can be frustrating.
At work, we are more often then not using web based applications now, through our browsers, if this time out is set at something low, like 20 minutes, its very easy to lose work due to session time outs.
Refreshing the page will restart the time out, and clicking a button will restart the time out, but doing both of these means you lose any form data you might be entering, as records such as change or incident records can sometimes be long and painful to re-enter.
Using this small piece of script, you can keep your sessions alive, without the need to refresh. So how does it work?
The script inserts a full screen iFrame which loads your web site into it, you use the site just like normal, and it looks no different to how you would normally use it except for one thing. In the background there is a timer running, every 10 minutes this timer kicks in and inserts an invisible iFrame behind your main page, loads up your web site, then removes its self. This gives the effect of refreshing the page, except your not touching your main window.
Your free to work for as long as you want on a single form or page without the worry of the page expiring on you. The web site is being refreshed in the background from another frame every 10 minutes.
Simply change the variable named “url” in the top of this page, in the script block, then past the full page into a .html file and open with your browser. Host the file on your web server and send it around your office. No more time outs
** Note** The CSS included in the following example must be included in your page if you decide to create your own. This styling hides the keepAlive frame and makes the main frame fit to your screen size.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'></script>
<script type="text/javascript">
$(document).ready(function(){
//Replace This With Your Applications URL
var url = "http://yourwebapplicationhere.com";
//Insert The Main Frame
$('<iframe id="mainFrame" name="mainFrame" src="' + url +'"></iframe>').appendTo('body');
window.setInterval(function() {
//Remove Previous Keep Alive Frame
if ($('#keepAliveFrame').length > 0) {
$('#keepAliveFrame').remove();
}
//Inject Keep Alive Frame
$('<iframe id="keepAliveFrame" name="keepAliveFrame" src="' + url + '"></iframe>').appendTo('body');
},600000);
//Resize Frame If Need Be
$(window).resize(function() {
$('#mainFrame').css({'height': '100%', 'width' : '100%'});
});
});
</script>
<style type="text/css">
* {
border: 0;
padding: 0px;
margin: 0px;
}
html {
overflow: hidden;
}
html, body {
height: 100%;
width: 100%;
}
#keepAliveFrame {
display: none;
width: 10px;
height: 10px;
}
#mainFrame {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
</body>
</html> |