The Future of the Web » Detecting focus of a browser window » HTML, CSS, JavaScript and Ajax Web Developer for Hire

Detecting focus of a browser window
May 16 2007
If you have some constantly running Ajax or JavaScript updates on a page, it might be nice to pause these when the browser is minimized or in the background, or when the user switches to another tab. After all, there's no sense in using the user's CPU and network if they aren't even watching what you're doing.

To achieve this, we can use the window.onfocus and window.onblur events like this:
```
function onBlur() {
	document.body.className = 'blurred';
};
function onFocus(){
	document.body.className = 'focused';
};

if (/*@cc_on!@*/false) { // check for Internet Explorer
	document.onfocusin = onFocus;
	document.onfocusout = onBlur;
} else {
	window.onfocus = onFocus;
	window.onblur = onBlur;
}
```
These events work in every major browser (Firefox, Internet Explorer 6/7, Safari & Opera).

Unfortunately, there's no way to tell with JavaScript if the browser is visible to the user. For example, they might be chatting on IM in a small window in front of the browser. You'll also find that the page is 'blurred' when you click into the location bar of the browser (except in Safari). You might want to display a message like "PAUSED" (think Super Mario Brothers) so people know why everything has stopped moving.

I've set up a demo page where you can try this out.

[Update October 14, 2008 - Seems the blur event handler would fire in Internet Explorer when the focus went from the body to an input or link. I've changed them to use document.onfocusin and document.onfocusout instead, which seems to work better. Now, putting focus from the body into an input causes them both to be fired, but one right after the other (onfocusout, onfocusin) resulting in a final "focused" state.]

Tags: javascript window events onfocus onblur tips
View 13 Comments | Add a comment
Comments

1. Frederico Padilha at 8:43pm on May 16, 2007

Nicee, I guess that pages that use a lot of JS will do the users a great favor in disabling some stuff that keeps taking resources from the computer... But if only programmers where that considerate ahahaha =)!
2. Georges Jentgen at 10:25pm on May 16, 2007

Never thought about this before, but as I am currently programming a live website analyzer with heavy Ajax-use, this will come in very handy. So I will disable every AJAX-calls when they are not needed. Awesome! Thanks for the tip!
3. Aaron Bassett at 12:18pm on May 17, 2007

Your post has really got me thinking about how I could use the onblur event to enhance different applications I've been working on....or just how you could annoy your users, window.onblur=window.focus();
I even wrote a quick post about my experiments with this: http://foobr.co.uk/2007/05/annoying_users_with_onblur/

It doesn't just apply to AJAX or Javascript heavy pages either. With externalInterface we could use this technique to interact with Flash. Videos which pause when you switch applications is the first application that comes to mind.
4. Jesse Skinner at 12:49pm on May 17, 2007

@Aaron - nice idea. Not annoying users, of course, but pausing video. I wonder what else we can do with this...
5. dandyna at 1:02pm on May 17, 2007

nifty tip, Jesse!
6. Georges Jentgen at 2:10pm on May 17, 2007

Another Idea I just got and what I will implement next into my PHP-Frameowork:

onBlur: graying out the page with some sort of "pause" message. Maybe a sitemap or some ads? :)
7. Aaron Bassett at 4:44pm on May 17, 2007

@Georges: I don't think it would be viable to put actual content into the onblur'd page because as soon as the user tries to click on say an ad the window will receive focus again and the ad will disapear.

Unless you made the user cancel the onblur'd page through a link or similar rather than just clearing it when the window gains focus. But this I think could become a nuisance (and perhaps confusing).

When I go back to a page I expect to be able to work with it right away. I don't expect to have to tell it that I want it to become active again :)
8. Mika at 10:17am on January 10, 2008

Hey man,

This really doesn't work in Firefox on Mac...it works when you switch between Firefox windows, but not when switching to another application.

/M
9. Greeny at 4:06pm on January 29, 2008

Important point Jesse! Consider global energy savings if all websites would be optimized to use CPU only when focused.
10. Al at 5:06pm on March 26, 2008

Have you tried to add a textarea to the document and then minimize the window when the textarea is still selected? Works in IE but not in Firefox. I tell this because in the tipical ajax chats, is useful to keep the focus in the textarea all the time, so the user can type another message without having to get the mouse. Problem is that with Firefox the onblur event doesn't happen at all because the browser thinks the focus is still in the textarea. Is there any workaround for this?
11. vituko at 1:44pm on December 24, 2008

Very, very important question!!!

It doesnt work at least in firefox when switching tabs...

What about mouseout? It will always be fired... Maybe with a timeout : 5 -10 seconds to avoid perturbing.

mouseout -> background-mode (some processes may continue but not the heaviest : animations,...) and maybe let a "big sticky button" (don't leave foreground-mode), I can have a small window with focus and I'm still seeing my browser behind.
It can be interesting to allow progressives modes or configure witch widgets let running (monitoring widgets,...)

For web applications, it's a kernel question, but... nowadays I have no time... to test.

Good post

Vituko
12. Stanislav Bozhkov at 7:12pm on April 1, 2009

It was useful 10x.
13. Manish Dubey at 4:52pm on May 27, 2009

It works in firefox if u use document.onfocus and document.onblur instead of windows.onfocus and windows.onblur

but again too work in chrome u need windows.onfocus and windows.onblur

Its working in safari as said but I want a script where I can get the change of tabs too in safari.

Any help plz email at manishd84@gmail.com

Add a Comment

Your Name Email (optional, used for Gravatar) Website (optional) Comment
Note: HTML tags and entities will be converted so that they are displayed as you type them. This means if you type in <em>, people will see <em>, and if you type <em>, people will see <em>.
What is six plus four? I want to be emailed when others add comments to this page.