¿Cómo puedo capturar el desenfoque y el enfoque de toda la ventana del navegador?

Question

Me gustaría capturar el desenfoque y el enfoque de la ventana del navegador real, lo que significa que el cambio de enfoque a cuadros secundarios no es de interés.

Actualmente He estado usando $(top).focus() $(top).blur()

y $(window).focus() $(window).blur()

Sin embargo, estas fuego cuando el usuario cambia el foco a iframes incrustados, que no quiero.

¿Alguien sabe de una manera de capturar la activación VERDADERA y la desactivación de la ventana?

[EDIT]

Blur y centrarse eventos se desencadenan cuando un usuario se mueve de una página web, en la página web de un iframe incrustado. Esto es diferente de los eventos de "activación de ventana", que solo se activan cuando la VENTANA (o pestaña) del NAVEGADOR real se lleva al frente o se envía (es decir, se cambia la pestaña o se minimiza).

No me interesa el desenfoque, porque el hecho de que el usuario haya navegado hacia un marco incrustado no tiene ninguna consecuencia para el programa. Sin embargo, si el usuario minimiza la ventana, cambia de pestañas o cambia a otro programa, quiero saberlo ...

Answer 1

Si no le importa capturar eventos de mouse dentro de sus iframes, puede agregar este css a los elementos iframe:

pointer-events:none; 

Esto indica a los eventos del ratón para ir "a través de" el elemento y el objetivo es que sea "por debajo" de ese elemento en su lugar.

Sin embargo, tenga en cuenta que la compatibilidad de esta característica entre los navegadores puede ser limitada, e incluso aquellos que la implementan pueden hacerlo de manera diferente. Esta declaración se pospone al borrador de CSS4 debido a la cantidad de problemas que tuvo en varias implementaciones de navegadores (según MDN - lea más aquí: https://developer.mozilla.org/en/CSS/pointer-events)

Answer 2

no necesita jquery.
window.onblur y window.onfocus puede resolver su problema :)

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

La propiedad onblur se puede utilizar para configurar el controlador borroso en la ventana, que se activa cuando la ventana pierde el foco.

Answer 3

Creo que puede usar algo como lo siguiente para deshabilitar ese comportamiento.

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

Answer 4

Puede utilizar algo como esto para detectar los eventos del navegador.

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

Fuente Post

Answer 5

tengo este

$(function() { 

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

}) 

funciona bien en IE, Firefox y Chrome, donde la bandera sólo se animan cuando play_banner se establece en true, por lo que dejar de trabajar cuando el el usuario cambia la página, y cuando está de vuelta continúa desde donde estaba ...

Answer 6

Acabo de solucionar este problema para la situación que tuve. Necesitaba contar cuánto tiempo el usuario estaba gastando en cada página.

La implementación anterior fue algo como esto:

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) 

después tuve el mismo problema que tenía: cada vez que el usuario ha introducido un iframe, que dejó de contar el tiempo. lo que hice fue escuchar a enfocar y eventos de desenfoque de los niños iframe cuerpos, así:

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(); 

Con esta configuración, cuando el usuario entra en el marco flotante, el navegador llamará _blur() y luego _focus() para que el cronómetro no se detenga

Esto podría no ser exactamente lo que quiere, pero dependiendo del problema, podría ser una solución aceptable. Funciona para mi caso de uso :-)