¿Hay alguna forma de detectar que la ventana está actualmente activa en IE8?

Question

¿Hay alguna forma de detectar que la ventana está actualmente activa (se muestra en la pestaña/ventana activa) en IE8?

Sé que hay eventos como onfocusin/onfocus - pero esta no es una solución perfecta, ya que la ventana también debe recibir el foco para que el evento se active, por lo que esto no funciona cuando el usuario simplemente cambia las pestañas sin tocar la ventana misma.

Creo que tiene que haber alguna solución simple y elegante para este caso de uso ordinario.

Answer 1

Este es un simple task para lograr usando jQuery:

$(function() { 
    window.isActive = true; 
    $(window).focus(function() { this.isActive = true; }); 
    $(window).blur(function() { this.isActive = false; }); 
}); 

La variable isActive mundial determina wether la pestaña/ventana es Acive.

Answer 2

 

var isActive = false; 
function onBlur() { 
    isActive = false; 
}; 
function onFocus(){ 
    isActive = true; 
}; 

if (/*@cc_on!@*/false) { // check for Internet Explorer 
    document.onfocusin = onFocus; 
    document.onfocusout = onBlur; 
} else { 
    window.onfocus = onFocus; 
    window.onblur = onBlur; 
} 
 

Answer 3

He escrito un plugin de jQuery que hace esto: http://mths.be/visibility le da una API muy simple que le permite ejecutar las devoluciones de llamada cuando cambia el estado de visibilidad de la página.

Lo hace usando el the Page Visibility API donde es compatible, y volviendo al antiguo focus y blur en navegadores anteriores.

Demostración:http://mathiasbynens.be/demo/jquery-visibility

Este plugin simplemente proporciona dos eventos personalizados para que usted utilice: show y hide. Cuando el estado de visibilidad de la página cambia, se desencadena el evento apropiado.

Se puede utilizar por separado:

$(document).on('show', function() { 
    // the page gained visibility 
}); 

... y ...

$(document).on('hide', function() { 
    // the page was hidden 
}); 

Dado que la mayoría de las veces usted necesitará ambos eventos, la mejor opción es utilizar un mapa de eventos. De esta forma, se puede unir los dos controladores de eventos de una sola vez:

$(document).on({ 
    'show': function() { 
    console.log('The page gained visibility; the `show` event was triggered.'); 
    }, 
    'hide': function() { 
    console.log('The page lost visibility; the `hide` event was triggered.'); 
    } 
}); 

El plugin detectará si la API de visibilidad de páginas es compatible de forma nativa en el navegador o no, y exponer esta información como un valor lógico (true/false) en $.support.pageVisibility:

if ($.support.pageVisibility) { 
    // Page Visibility is natively supported in this browser 
} 

Answer 4

<script> 

    // Adapted slightly from Sam Dutton 
    // Set name of hidden property and visibility change event 
    // since some browsers only offer vendor-prefixed support 
    var hidden, state, visibilityChange; 
    if (typeof document.hidden !== "undefined") { 
     hidden = "hidden"; 
     visibilityChange = "visibilitychange"; 
     state = "visibilityState"; 
    } else if (typeof document.mozHidden !== "undefined") { 
     hidden = "mozHidden"; 
     visibilityChange = "mozvisibilitychange"; 
     state = "mozVisibilityState"; 
    } else if (typeof document.msHidden !== "undefined") { 
     hidden = "msHidden"; 
     visibilityChange = "msvisibilitychange"; 
     state = "msVisibilityState"; 
    } else if (typeof document.webkitHidden !== "undefined") { 
     hidden = "webkitHidden"; 
     visibilityChange = "webkitvisibilitychange"; 
     state = "webkitVisibilityState"; 
    } 
    // Add a listener that constantly changes the title 
    document.addEventListener(visibilityChange, function() { 
     document.title = document[state]; 
    }, false); 

    // Set the initial value 
    document.title = document[state]; 

</script>