Periodically automatically refreshing a window only when it's unfocused.

[ejp]

There's an internal website I use at work in which I have to log into and navigate throughout the various portions of the site. Unfortunately, it times out after a certain number of minutes of inactivity have passed and I have to log back into it and navigate back to where I was. It's rather annoying. It's a security measure, but I currently reside in an environment where it can't be tampered with on my computer.

I noticed refreshing the site every few minutes keeps me logged in and on the page I've navigated to. I was wondering if there was a way to somehow automate this process.

When the window is active, I don't need it to refresh, but when it's inactive, I'd like for it to refresh every 10 minutes or so.

I'm able to place the website in a frame, so I can put the "refresh code" outside of the frame and that should work.

So far, I've played around with onblur, settimeout/setinterval, and location.reload. The best I was able to get was to call the refresh function [setTimeout("location.reload(true);",1000);] when the window is not in focus (onblur); it refreshes once, but that's it. It doesn't refresh a second time even though it's still onblur. Activating the page then deactivating will invoke the reload again, but I'd like to automate this without having to ever touch the window unless I have to. I've also tried setInterval and it produces the same results. This may possibly work in updated browsers, but I'm forced to use IE6.

I was thinking about placing the refresh function in a loop (and this function is only called when onblur), but I'm not sure how to do this (Javascript beginner) and what I've tried so far doesn't seem to work.

Any assistance is appreciated.

[jscheuer1]

Would it hurt it to refresh every 10 minutes or so even when it is active?

If not, that's the best approach, just use a meta refresh tag. Some browsers do not register the onfocus and onblur events for windows, as technically these are reserved for form inputs, textareas, links, and perhaps frames/iframes.

As long as you're using IE or Firefox though, those events do register on the window and you could do like:

<script type="text/javascript">
;(function(){
	var blurtimer;
	onblur = function(){
		blurtimer = setInterval(function(){location.reload();}, 10*60*1000); //10 times 60 times 1000 milliseconds is 10 minutes
	};
	onfocus = function(){
		clearInterval(blurtimer);
	};
})();
</script>

[ejp]

Thank you for your response and information, jscheuer1. Unfortunately, I can't have it refresh when it's active. There are some pages on this Intranet site that do not load correctly if refreshed. I wouldn't want the script to automatically refresh when I'm working in one of those pages. Some pages of the site are poorly coded, to be honest.

I wish I had seen your post earlier. That's essentially what I had to do, but it only got me started. In IE6, location.reload did not work. It worked fine if the page I was trying to refresh was on my local machine, but it's actually on the Intranet (same error if I used an Internet site, as in my example below). If I tried to reload the Intranet page using location.reload, IE6 errored: "Line 1 Char 1 Error Permission denied Code 0." There's a Microsoft Knowledge Base on this. The solution was basically not to use location.reload.

The index is running from my local machine and the Intranet page loads in the frame. Something else that I had failed to mention was that I was using 2 frames. The top frame is also being loaded from my local machine. We have backups of the particular Intranet site in case one goes down. I use the top frame to just load one of the backups into the bottom frame if necessary. So I realized that whatever page I'm currently using, the script has to be able to know which page to reload and not just keep reloading a broken page.

Before I continue, I want to say that I'm still very much a Javascript beginner, but after a few days of research, I'm getting well acquainted with it and it's actually really fun to work with. Much of the following code has been pulled from difference sources. I wish I could cite them, but in my haste, I never got a chance to bookmark them. I don't know if any of it can be done in a better fashion; I just know that my final product works.


The following example uses location.reload and it would have reloaded any backup page if they were all local pages. 5 second refresh in all examples.

index1.html:

<html><head>

<script type="text/javascript">
var int=""
function onBlur() {
	int=window.setInterval("parent.idm_bottom.location.reload(true);",5000);
};

function onFocus(){
	window.clearInterval(int)
	int=""
};


</script>

<frameset rows="10,*" border="0" frameborder="0" framespacing="0">

  <frame src="idm_top.html" name="idm_top" noresize"/>
  <frame src="http://www.yahoo.com/" name="idm_bottom" onblur="onBlur();" onfocus="onFocus();"/>

</frameset>

</head><body></body></html>

idm_top.html (used in index1.html, and index2.html below):

<html><body>

<a href="http://www.yahoo.com/" target="idm_bottom">Link 1</a> | 
<a href="http://www.google.com/" target="idm_bottom">Link 2</a> | 
<a href="http://www.bing.com/" target="idm_bottom">Link 3</a> | 

</body></html>

The above example gave me the error, so I thought about it a different way. Instead of actually reloading the site, just tell the frame to load a particular page again. This example uses the same idm_top.html above.

index2.html:

<html><head>

<script type="text/javascript">
var int=""

function onBlur() {
	int=window.setInterval("top.frames['idm_bottom'].location.href='http://www.yahoo.com/';",5000);

};

function onFocus(){
	window.clearInterval(int)
	int=""
};
</script>

<frameset rows="10,*" border="0" frameborder="0" framespacing="0">

  <frame src="idm_top.html" name="idm_top" noresize"/>
  <frame src="http://www.yahoo.com/" name="idm_bottom" onblur="onBlur();" onfocus="onFocus();"/>

</frameset>

</head><body></body></html>

The problem here is that this will always "reload" only yahoo.com (in this example). If I then wanted to use a backup site (google.com, for example), it would still try to load yahoo.com after 5 seconds onblur. So then I figure I needed to get my idm_top.html involved in this somehow, which leads me to my final working product below, which I'm glad I found soon after:

idm_top.html (used in index3.html):

<html><body>

<a href="javascript:parent.idm_link('http://www.yahoo.com/');">Link 1</a> | 
<a href="javascript:parent.idm_link('http://www.google.com/');">Link 2</a> | 
<a href="javascript:parent.idm_link('http://www.bing.com/');">Link 3</a> | 

</body></html>

index3.html, which works for my particular set of needs:

<html><head>

<script type="text/javascript">
var int=""
var idmbot="http://www.yahoo.com/"

function idm_link(url) {
	idmbot=url;
	top.frames['idm_bottom'].location.href=idmbot;
}

function onBlur() {
	int=window.setInterval("top.frames['idm_bottom'].location.href=idmbot;",5000);

};

function onFocus(){
	window.clearInterval(int)
	int=""
};
</script>

<frameset rows="10,*" border="0" frameborder="0" framespacing="0">

  <frame src="idm_top.html" name="idm_top" noresize"/>
  <frame src="http://www.yahoo.com/" name="idm_bottom" onblur="onBlur();" onfocus="onFocus();"/>

</frameset>

</head><body></body></html>

Thank you for reading. I'm not sure if anyone will find any of this useful, I certainly had fun on this small project and wanted to share my progress.