6

I have a web Application running on a controller (Scarcely limited processing, memory and network bandwidth). The page is basically a simple HTML file full of LEDs that should be updated on an interval. On each interval, Javascript sends an Ajax request to the server and updates all the LEDs based on the reply. Now this works fine!

The problem is when the user opens one of these pages and start browsing other stuff. For security and economical reasons, we don't want to update the page when the client is not seeing this page. This is the algorithm:

A flowchart of the page update algorithm

I developed this little test code to see how page events work (see live on jsFiddle):

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function m(msg){
    document.getElementById("logplace").innerHTML+=msg+"<br/>";
}
</script>
</head>
<body onblur="m('Blur')" onerror="m('Error')" onfocus="m('Focus')" onload="m('Load')" onresize="m('Resize')" onunload="m('Unload')">
<span id="logplace"></span>
</body>
</html>

I need to page to be only updated if the user is currently viewing it. I searched the Stackoverflow and the following threads don't seem to be the answer:

PS. JQuery exists on the server as well. But if there is a simpler way, I prefer not to use JQuery.

Community
  • 1
  • 1
AlexStack
  • 16,766
  • 21
  • 72
  • 104
  • Didn't ask the right question. Is this page being viewed is teh key bit. Answer are various and potentially iffy though. Try http://stackoverflow.com/questions/354718/detect-which-form-input-has-focus-using-javascript-or-jquery – Tony Hopkinson Feb 07 '12 at 10:06
  • The question from your link is about a page element having focus. I'm asking about the entire page being viewed or not. – AlexStack Feb 07 '12 at 10:28
  • The page is an element, so same sort of issue.... – Tony Hopkinson Feb 07 '12 at 14:37

3 Answers3

4
var focused = false;

function onBlur() {
    focused = false;
};
function onFocus(){
    focused = true;
};

if (/*@cc_on!@*/false) { // check for Internet Explorer
document.onfocusin = onFocus;
document.onfocusout = onBlur;
} else {
window.onfocus = onFocus;
window.onblur = onBlur;
}

Then your javascript can check

if (focused)
{
    // process ajax
}

source: http://www.thefutureoftheweb.com/blog/detect-browser-window-focus

Check out the demo he created so you can see it in action: http://www.thefutureoftheweb.com/demo/2007-05-16-detect-browser-window-focus/

With that in mind, if your page uses an interval timer to update, when the window loses focus, you could kill the interval, then start it again when the window is focused.

Francis Lewis
  • 8,872
  • 9
  • 55
  • 65
  • This one is very close to what I want but there is a problem: the user has two or more display screens keeping this web page open in one of them and working on the other display screens. The page should still get updated even when it's not focused ***but still visible***. The only time the page should not be updated is when it's not visible (when the browser is minimized or when user has switched to another tab). – AlexStack Feb 07 '12 at 10:23
  • There's no way for javascript to tell other than to check focus. – Francis Lewis Feb 07 '12 at 20:32
0

As far as I can see you have the page list in your db. You can add a field called is_viewed and update it by +1 each time users enters the page and -1 each time he exits the page. So if it is ==0 you can perform your check.
I don't see any other way (not Ajax) to check what is going on another page. So you'll have to send the request anyway

lvil
  • 4,326
  • 9
  • 48
  • 76
  • that's an interesting solution. I still need to "listen" on an even that is triggered when the current page is being "blured" or "entered". I also need to handle the special case when a user closes a tab instead of simply switching to another one. – AlexStack Feb 07 '12 at 10:05
  • I'm not sure about the "blured" event, but for close and leave and enter there are javascript events – lvil Feb 07 '12 at 10:18
  • I tried them and updated my question using some code. Still doesn't solve the problem entirely. See my comments to Francis's answer. – AlexStack Feb 07 '12 at 10:50
  • I doubt you are going to get an ideal solution. As much as thay try to graft state onto HTTP, there are still gaps. This is one of them. I'm not sure I could get this a 100% in winforms without a lot of messing about, in a web browser... Too many variables not under your control. Hmm how about page active detection being mouseover, messy but it should work. – Tony Hopkinson Feb 07 '12 at 14:35
0

I propose that when you start the window (that you want to update only when visible) you start it from a master window, or the other window that has focus. Combine the focus solution by Francis and the following technique whereby you can access the DOM of the window from another.

You can look here for more information. Basically you will use the following code 

var pageControl=open('page.html','page name','width=200,height=200')

to open the page and be able to access it via the pageControl variable using javascript.

It solves the problem by allowing you to update the page when either windows has focus, controlling the updates from the other window or from a master window. The only potential roadblock from here would be compatibility.

A master window solution may be a little more involved. But if you were to do this from the other window you could imagine that if you find no window has focus then you wouldn't fire the update script.. otherwise fire it!

Ross
  • 1,013
  • 14
  • 32