RSS

Javascript and Cross-browser Window focus

28 Aug

It is a common requirement in today’s highly interactive web applications to keep track if the browser window is currently in focus. Let me tell you one thing. If you take a look at the browser events and the very limited documentation, you might be tempted to believe that you are in safe hands. But thats not the case.

Catching the onblur and onfocus events is the most recommended way to know when a window gains or loses focus. But this does not work in all cases. The onfocus event is triggered correctly in almost all browsers. But onblur on the other hand is highly unpredictable. In Internet Explorer, every onfocus event is immediately followed by an onblur event even though the window is still in focus. On Firefox, the onblur will not be trigerred if the active element of the window is of input type.

Solution: IE has its custom events which works fine for it namely focusin and fosucout. For firefox, we need to check whether the active element has changed.

var isIE = (navigator.appName == "Microsoft Internet Explorer");
var hasFocus = true;
var active_element;

function setFocusEvents()	{
	active_element = document.activeElement;
	if (isIE)	{
		document.onfocusout = function() {	onWindowBlur();	      }
		document.onfocusin = function()	 {	onWindowFocus();     }
	}	else	{
		window.onblur = function()	  {	onWindowBlur();	         }
		window.onfocus = function()	 {	onWindowFocus();       }
	}
}

function onWindowFocus()	{
	hasFocus = true;
}

function onWindowBlur()	{
	if (active_element != document.activeElement) {
		active_element = document.activeElement;
		return;
	}
	hasFocus = false;
}

NB: I have tested mostly on IE 6+ and Firefox. So you might find my method incomplete for other browsers.

Update: This post has been updated (corrected) as per Lucent’s comment.

About these ads
 
12 Comments

Posted by on August 28, 2007 in Computers, Javascript

 

12 responses to “Javascript and Cross-browser Window focus

  1. Lucent

    March 24, 2008 at 12:27 pm

    I was very excited to find this, but disappointed to find window.onfocusin/out do not fire in IE7. Perhaps this script could be modified to use document.onfocusin?

     
  2. hemchand

    March 25, 2008 at 12:53 am

    Thanks Lucent. You have a valid point there. I see that your suggession works fine and I am updating the post accordingly.

     
  3. Joo

    April 8, 2008 at 11:34 pm

    Very nice solution, thank you! While in my special case, I didn’t need to use the activeElement part, the rest seems to work fine in Safari 3.1 and Opera 9, too.

     
  4. Felipe

    April 18, 2008 at 2:38 am

    Hey dude, for some reason your code doesn’t work with me (IE6 / FF), any ideas?

    PS: I’ve create a new solution that works for me, if you want you can take a look at it in my blog.

    Regards.

     
  5. Enno

    May 17, 2008 at 6:36 am

    Can you give me an example how to build this in a website?

    Thx alot!

     
  6. Snarky

    November 1, 2008 at 9:07 pm

    Thanks for putting this code out there! Needed a quick example and this site popped up first. Works wonderfully though you’re missing a ‘;’ on line 12 above.

     
  7. Rajeev

    February 11, 2009 at 12:27 pm

    Not working in safari

     
    • hebchop

      November 16, 2009 at 10:19 pm

      I’m getting the same as Rajeev in Safari 3.3 and 4. Safari doesn’t seem to give an onfocus event on load like the other browsers do. You have to load, and then lose focus, before an onfocus will fire in Safari.

      I’m trying to create something that will put a hold a SWF embed until the window has focus and I’m banging my head on how to accomplish in Safari.

       
  8. rhodmie

    May 7, 2009 at 12:05 pm

    Can u guys test if the onblur works on Mac platform using Safari 3.0 and higher, the onblur function doesn’t work please check out this link for detailed info on how to replicate the idea:

    https://bugs.webkit.org/show_bug.cgi?id=18675

    thanks

     
  9. Aza D. Oberman

    December 31, 2009 at 4:40 am

    This solution relies on “document.activeElement” being supported. On my Firefox 3.5.6 “document.activeElement” is undefined.
    Wouldn’t the essential “active_element != document.activeElement” test in onWindowBlur() be ineffective under these circumstances?

     
  10. WinWin

    May 17, 2010 at 4:22 am

    hello
    i’m so glad that i saw this website. that comment was so great. thanks again i bookmarked this blog.
    are you planning to write similar articles?

     
  11. krishna

    July 26, 2012 at 11:46 am

    Thankyou It saved my day

     

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
Follow

Get every new post delivered to your Inbox.

%d bloggers like this: