Comment détecter si un onglet est focalisé ou non dans Chrome avec Javascript ?

Question

J'ai besoin de savoir si l'utilisateur consulte actuellement un onglet ou non dans Google Chrome. J'ai essayé d'utiliser les événements blur et focus liés à la fenêtre, mais seul le blur semble fonctionner correctement.

window.addEventListener('focus', function() {
  document.title = 'focused';
});

window.addEventListener('blur', function() {
  document.title = 'not focused';
});

L'événement focus fonctionne bizarrement, seulement parfois. Si je passe à un autre onglet et que je reviens, l'événement focus ne s'active pas. Mais si je clique sur la barre d'adresse et que je reviens sur la page, il s'active. Ou si je passe à un autre programme et que je reviens à Chrome, il s'active si l'onglet est en cours de focalisation.

Answer 1

Le code donné par le poster original (dans la question) fonctionne maintenant, depuis 2011 :

window.addEventListener('focus', function() {
    document.title = 'focused';
});

window.addEventListener('blur', function() {
    document.title = 'not focused';
});

editar : À partir de quelques mois plus tard, dans Chrome 14, cela fonctionnera toujours, mais l'utilisateur doit avoir interagi avec la page en cliquant n'importe où dans la fenêtre au moins une fois. Il ne suffit pas de faire défiler la page pour que cela fonctionne. Faire window.focus() ne le fait pas non plus automatiquement. Si quelqu'un connaît une solution de contournement, veuillez le mentionner.

Answer 2

La réponse sélectionnée pour la question Existe-t-il un moyen de détecter si une fenêtre de navigateur n'est pas actuellement active ? devrait fonctionner. Il utilise le API de visibilité des pages rédigé par le W3C le 2011-06-02.

Answer 3

Cela pourrait fonctionner après tout, j'ai été curieux et j'ai écrit ce code :

...
setInterval ( updateSize, 500 );
function updateSize(){
  if(window.outerHeight == window.innerHeight){
    document.title = 'not focused';             
  } else {
    document.title = 'focused';
  }

  document.getElementById("arthur").innerHTML = window.outerHeight + " - " + window.innerHeight;
}
...
<div id="arthur">
  dent
</div>

Ce code fait exactement ce que vous voulez, mais d'une manière peu élégante. Le problème est que Chrome semble ignorer le changement de titre de temps en temps (lorsque l'on passe à l'onglet et que l'on maintient la souris enfoncée pendant 1 seconde semble toujours créer cet effet).

Vous obtiendrez des valeurs différentes sur votre écran, mais votre titre ne changera pas.

conclusion : Quoi que vous fassiez, ne vous fiez pas au résultat lorsque vous le testez !

Answer 4

J'ai trouvé que l'ajout des événements onblur= et onfocus= en ligne contournait le problème :

Answer 5

Cela pourrait fonctionner avec JQuery

$(function() {
    $(window).focus(function() {
        console.log('Focus');
    });

    $(window).blur(function() {
        console.log('Blur');
    });
});