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

fireshot

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 los marcos secundarios no es de interés.

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

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

Sin embargo, estos se activan cuando el usuario cambia el enfoque a iframes incrustados, lo que no quiero.

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

[EDITAR]

Los eventos de desenfoque y enfoque se activan cuando un usuario pasa de una página web a 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 DE NAVEGACIÓN real (o pestaña) se pone 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 a un marco incrustado no tiene ninguna importancia para el programa. Sin embargo, si el usuario minimiza la ventana, cambia las pestañas o cambia a otro programa, quiero saberlo ...

Answer 1

Acabo de solucionar este problema para la situación que tenía. Necesitaba contar cuánto tiempo pasaba el usuario 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)

Luego tuve el mismo problema que tenía: cuando el usuario ingresaba un iframe, dejaba de contar el tiempo. Lo que hice fue escuchar para enfocar y difuminar los eventos de los niños en los 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 ingresa al iframe, el navegador llamará a _blur () y luego a _focus () para que el temporizador no se detenga.

Es posible que esto no sea exactamente lo que desea, pero dependiendo del problema puede ser una solución aceptable. Funciona para mi caso de uso :-)

Answer 2

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

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

Answer 3

Puedes usar 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 de Post

Answer 4

Si no te importa capturar eventos del mouse dentro de tus iframes, puedes agregar este css a los elementos del iframe:

pointer-events:none;

Esto indica a los eventos del mouse que pasen "a través" del elemento y apunten a lo que esté "debajo" de ese elemento.

Sin embargo, tenga en cuenta que la compatibilidad de esta función entre los navegadores puede ser limitada, e incluso los 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 las implementaciones de varios navegadores (según MDN - lea más aquí: https://developer.mozilla.org/en/CSS/pointer-events )

Answer 5

no necesitas jquery
window.onblur y window.onfocus pueden 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 window.onblur se puede utilizar para establecer el controlador de desenfoque en la ventana, que se activa cuando la ventana pierde el foco.

Answer 6

tengo esto

$(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 el banner solo se anima cuando play_banner se establece en verdadero, por lo que deja de funcionar cuando el usuario cambia la página, y cuando vuelve, continúa desde donde estaba ...