CODEWITHSUNDEEP
javascriptbrowsercross-browser
Jim Fiorato
Jim Fiorato

Reputation: 4872

Is there a reliable way to determine if a browser tab or window is inactive or not in focus?

I've got a javascript timer that is making XMLHTTP requests on a constant basis (once every 10 seconds). I'd love to be able to pause the timer when the window or tab loses focus.

I'm fully aware of the onFocus and onBlur events on the window object, but they don't fire reliably across all browsers. For instance, in Safari, tabs don't trigger the events.

Simple code below distills the functionality I'm looking for:

<html>
  <head>
    <title>Testing</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js"></script>
  </head>
  <body>
    <div id="console"></div>
    <script type="text/javascript">
      window.onfocus = function(event) {
        $('console').insert('Window gained focus<br />');
      }

      window.onblur = function(event) {
        $('console').insert('Window lost focus<br />');
      }
    </script>
  </body>
</html>

Does anyone out there have a technique for determining when a browser window or tab loses/gains focus that works across across all popular browsers?

Upvotes: 8

Views: 6138

Answers (5)

user2667398
user2667398

Reputation: 

<script>

    // Adapted slightly from Sam Dutton
    // Set name of hidden property and visibility change event
    // since some browsers only offer vendor-prefixed support
    var hidden, state, visibilityChange; 
    if (typeof document.hidden !== "undefined") {
        hidden = "hidden";
        visibilityChange = "visibilitychange";
        state = "visibilityState";
    } else if (typeof document.mozHidden !== "undefined") {
        hidden = "mozHidden";
        visibilityChange = "mozvisibilitychange";
        state = "mozVisibilityState";
    } else if (typeof document.msHidden !== "undefined") {
        hidden = "msHidden";
        visibilityChange = "msvisibilitychange";
        state = "msVisibilityState";
    } else if (typeof document.webkitHidden !== "undefined") {
        hidden = "webkitHidden";
        visibilityChange = "webkitvisibilitychange";
        state = "webkitVisibilityState";
    }

    // Add a listener that constantly changes the title
    document.addEventListener(visibilityChange, function() {
        document.title = document[state];
    }, false);

    // Set the initial value
    document.title = document[state];

</script>

Upvotes: 0

detj
detj

Reputation: 5309

The above code is working fine in Safari v3.0.4 (WebKit 530+), the bug has been resolved it seems. I've checked it in Google Chrome v3.0.195.27 and it has the same Safari bug, although it has a newer version of WebKit.

Upvotes: 3

eyelidlessness
eyelidlessness

Reputation: 63519

One thing to consider is that tab focus/blur events being blocked by browser vendors is possibly a way to protect users. Some browsers allow alert()-style popups (and even, I believe, a focus() method) to cause a tab to regain focus. Blocking the focus/blur events for tab switching could be akin to protection against, for example, unrequested popups and window sizing/positioning/closing.

Upvotes: -1

Mnebuerquo
Mnebuerquo

Reputation: 5949

There is another Stack Overflow question regarding this topic. They didn't address the tabbed browsing issue there. They do give a link which goes into some detail, although without using jquery.

Is there a way to detect if a browser window is not currently active?

I don't think focus/blur events work with tabbed browsing in Safari at all. Some people have suggested mouse events, like mouseleave/mouseenter for this.

I've got some UI issues like this myself, so if I discover anything I'll follow up here.

Upvotes: 2

chaos
chaos

Reputation: 124297

My previous desperate attempts to find such a thing have led me to conclude that there is no such animal.

Oh, how I would love to be wrong.

Upvotes: 0

Related Questions