JavaScript / jQuery: Teste si la fenêtre a le focus

Question

Comment testez-vous si le navigateur a le focus?

Answer 1

utilisez la méthode hasFocus du document. Vous pouvez trouver une description détaillée et un exemple ici: Méthode hasFocus

EDIT: Ajouté le violon http://jsfiddle.net/Msjyv/3/

HTML

 Currently <b id="status">without</b> focus...
 

JS

 function check()
{
    if(document.hasFocus() == lastFocusStatus) return;

    lastFocusStatus = !lastFocusStatus;
    statusEl.innerText = lastFocusStatus ? 'with' : 'without';
}

window.statusEl = document.getElementById('status');
window.lastFocusStatus = document.hasFocus();

check();
setInterval(check, 200);
 

Answer 2

Je n'ai pas testé cela dans d'autres navigateurs, mais cela semble fonctionner avec Webkit. Je vous laisse essayer IE. : o)

Essayez-le: http://jsfiddle.net/ScKbk/

Après avoir cliqué sur le début de l'intervalle, modifiez le focus de la fenêtre du navigateur pour afficher les résultats. Encore une fois, testé uniquement dans Webkit.

 var window_focus;

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

$(document).one('click', function() {
    setInterval(function() {
        $('body').append('has focus? ' + window_focus + '<br>');
    }, 1000);
});​
 

Answer 3

HTML:

 <button id="clear">clear log</button>
<div id="event"></div>​
 

Javascript:

 $(function(){

    $hasFocus = false;

    $('#clear').bind('click', function() { $('#event').empty(); });

    $(window)
        .bind('focus', function(ev){
            $hasFocus = true;
            $('#event').append('<div>'+(new Date()).getTime()+' focus</div>');
        })
        .bind('blur', function(ev){
            $hasFocus = false;
            $('#event').append('<div>'+(new Date()).getTime()+' blur</div>');
        })
        .trigger('focus');

    setInterval(function() {
        $('#event').append('<div>'+(new Date()).getTime()+' has focus '+($hasFocus ? 'yes' : 'no')+'</div>');
    }, 1000);
});​
 

tester

METTRE À JOUR:

Je vais le réparer, mais IE ne fonctionne pas très bien

test de mise à jour