The Future of the Web » Detecting focus of a browser window » PHP, MySQL, JavaScript and Ajax Web Developers 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 18 Comments | Add a comment
Comments

1. Frederico Padilha at 2: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 4: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 6:18am 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 6:49am 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 7:02am on May 17, 2007

nifty tip, Jesse!
6. Georges Jentgen at 8:10am 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 10:44am 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 4: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 10:06am 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 11:06am 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 7:44am 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 1:12pm on April 1, 2009

It was useful 10x.
13. Manish Dubey at 10:52am 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
14. hari at 3:32am on August 3, 2009

Its simply great idea.

Thanks
15. karthik at 5:43am on September 7, 2009

nice thoughts...

what if the user clicks on the status bar(which many of us habitual of clicking system time, expanding status icons etc...) when browser window continues to show our application running??? wudn't our dependency on focus management cause problem when application is not actually out of focus but just technically??? for ex. we pause video when user watches it but we do pause because we got onblur...
16. wijey at 1:41am on November 8, 2009

big thanks to you bro... This is really helpfull
17. andy frusciante at 11:09am on November 15, 2009

wowww.. this is what i've been searching. there is something 'sucks' bout the IE compatiblity. n i found it now
18. Juergen Riemer at 7:49am on November 23, 2009

Hi Jesse,

focus and blur will fire on any such event in the dom (depending on the browser). This means every time you click on a different elements e.g. checkbox in the very same page you'll have a chance to fire a blur/focus sequence.
I would not base any important behaviour on blur/focus events of the window/self object

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.