C'è un modo per rilevare che la finestra è attualmente attiva in IE8?

Question

C'è un modo per rilevare che la finestra è attualmente attiva (viene mostrata sulla scheda/finestra attiva) in IE8?

So che ci sono eventi come onfocusin/onfocus - ma questo non è una soluzione perfetta, dal momento che la finestra deve ricevere anche punto di riferimento per l'evento di essere licenziato - quindi questo non funziona quando l'utente passa solo le schede senza toccare la finestra stessa.

Credo che ci debba essere una soluzione semplice ed elegante per questo caso d'uso ordinario.

Answer 1

Questo è un semplice task ottenere utilizzando jQuery:

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

La variabile isActive globale determina wether la scheda/finestra è 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

Ho scritto un plugin jQuery che fa questo: http://mths.be/visibility ti dà una molto semplice API che consente di eseguire i callback quando lo stato di visibilità della pagina.

Lo fa utilizzando il the Page Visibility API dove è supportato, e ricadendo al buon vecchio focus e blur nei browser più vecchi.

Demo:http://mathiasbynens.be/demo/jquery-visibility

Questo plugin fornisce semplicemente due eventi personalizzati per l'uso: show e hide. Quando lo stato di visibilità della pagina cambia, verrà attivato l'evento appropriato.

Si possono usare separatamente:

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

... e ...

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

Poiché la maggior parte del tempo avrete bisogno entrambi gli eventi, la soluzione migliore è quella di utilizzare una mappa eventi. In questo modo, è possibile associare entrambi i gestori di eventi in un colpo solo:

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

Il plugin in grado di rilevare se l'API pagina visibilità è supportato nativamente nel browser oppure no, ed esporre queste informazioni come un valore booleano (true/false) in $.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>