April 10, 2012

How can I capture the blur and focus of the entire browser window?

Question by Adam

I would like to capture the blur and focus of the actual browser window – meaning that change of focus to child frames is not of interest.

Currently I have been using
$(top).focus()
$(top).blur()

and
$(window).focus()
$(window).blur()

However, these fire when the user changes focus to embedded iframes, which I don’t want.

Does anyone know of a way to capture TRUE activation and deactivation of the window?

[EDIT]

Blur and focus events fire when a user moves from a web-page, to the web-page of an embedded iframe.
This is different from ‘window activation’ events, which only fire when the actual BROWSER WINDOW (or tab) is brought to the front, or sent away (i.e, tab changed, or minimized).

I am not interested in blur, because the fact that the user has navigated to an embedded frame is of no consequence to the program. However, if the user minimizes the window, changes tabs, or switches to another program, I want to know about it…

Answer by Starx

You can use something like this to detect the browser events.

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;
}

Source Post

Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+

...

Please fill the form - I will response as fast as I can!