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...

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...

• javascript
• jquery

• 1 I couldn't figure out a way to tell the difference, sorry. – alex Commented Mar 26, 2012 at 21:39
• I have enhanced the explanation of the difference between focus and activation. – Adam Commented Mar 26, 2012 at 21:57
• 1 Did you ever figure this out? I don't see a correct answer below. I'm having the same issue. – Redtopia Commented May 17, 2013 at 2:42
• No unfortunately - no dice. – Adam Commented May 17, 2013 at 9:03
• Might want to check this out: stackoverflow.com/questions/1060008/…. After more investigation, I wrote something based on this: html5rocks.com/en/tutorials/pagevisibility/intro – Redtopia Commented May 17, 2013 at 18:21

6 Answers 6

you dont need jquery.
window.onblur and window.onfocus can solve your problem :)

(function(){
    var timer = null;
    var has_switched = false;

    window.onblur = function(){
      timer = settimeout(changeitup, 2000);
    }  

    window.onfocus = function(){
      if(timer) cleartimeout(timer);
    }

    function changeitup(){
        if( has_switched == false ){
            alert('the tab lost focus')
            has_switched = true;    
        }
    }
})();

The onblur property can be used to set the blur handler on the window, which is triggered when the window loses focus.

i have this

$(function() {

    $(window)
        .focus(function() { document.getElementById('play_banner').value = true; })
        .blur(function() { document.getElementById('play_banner').value = false; })

 })

working fine on IE, firefox and chrome, where the banner only animate when play_banner is set to true, so it stop working when the user changes the page, and when he's back it continues from where it was...

If you don't care about capturing mouse events inside your iframes, you can add this css to the iframe elements:

pointer-events:none;

This instructs the mouse events to go "through" the element and target whatever is "underneath" that element instead.

Note however, that this feature compatibility among browsers might be limited, and even those implementing it might do that differently. This declaration is postponed to CSS4 draft because of amount of issues it had in various browsers implementations (according to MDN - read more here: https://developer.mozilla.org/en/CSS/pointer-events)

i think you can use something like the following to disable that behavior.

$('iframe').focusin(function(event)
{
    event.preventDefault();
    return false;
});

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

I just fixed this problem for the situation I had. I needed to count how much time the user was spending in each page.

The previous implementation was something like this:

var isfocused = true
var time_on_page = 0;

function increment_time(){
    if(isfocused = true){
        time_on_page++;
    }
}

settimeout(increment_time, 1000);

function _blur(){
    isfocused = false
}

function _focus(){
    isfocused = true
}

$(window).blur(_blur)
$(window).focus(_focus)

Then I had the same problem you had: whenever the user entered an iframe, it stopped counting time. What I did was listen to focus and blur events of the children iframe bodies, like so:

var isfocused = true
var time_on_page = 0;

function increment_time(){
    if(isfocused = true){
        time_on_page++;
    }
    instrument_iframes(); //because iframes might be added later to the dom with javascript
}

settimeout(increment_time, 1000);

function _blur(){
    isfocused = false;
}

function _focus(){
    isfocused = true;
}

function instrument_iframes(){
    var iframes = $('iframe');
    for (var i=0; i<iframes.length; i++){
        var contents = $(iframes[i]).contents();
        if(contents){
            var body = contents.find('body')
            var body0 = body[0]
            if(!body0.instrumented){
                body.blur(this._blur(this));
                body.focus(this._focus(this));
                body0.instrumented = true;
            }
        }
    }
}

$(window).blur(_blur);
$(window).focus(_focus);
instrument_iframes();

With this setup, when the user enters the iframe, the browser will call _blur() and then _focus() so the timer doesn't stop.

This might not exactly what you want, but depending on the problem it might be an acceptable solution. It works for my use case :-)