web-dev-qa-db-fra.com

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

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

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

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

L'événement de mise au point fonctionne bizarrement, seulement parfois. Si je passe à un autre onglet et vice-versa, l'événement focus ne s'activera pas. Mais si je clique sur la barre d'adresse puis reviens sur la page, ce sera le cas. Ou si je passe à un autre programme puis reviens à Chrome il s'activera si l'onglet est actuellement concentré.

javascriptgoogle-chromefocus
69
fent

Mise à jour 2015: La nouvelle façon HTML5 avec l'API de visibilité (tirée du commentaire de Blowsie):

document.addEventListener('visibilitychange', function(){
    document.title = document.hidden; // change tab text for demo
})

Le code que l'affiche originale donne (dans la question) fonctionne maintenant, à partir de 2011:

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

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

edit : À 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. Un simple défilement et tel n'est pas suffisant pour que cela fonctionne. Faire window.focus() ne fait pas non plus fonctionner automatiquement. Si quelqu'un connaît une solution de contournement, veuillez le mentionner.

121
ninjagecko

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 Page Visibility API rédigé par le W3C le 2011-06-02.

8
thirdender

Pour tous ceux qui souhaitent échanger les titres de page sur le flou, puis revenir au titre de la page d'origine sur focus:

// Swapping page titles on blur
var originalPageTitle = document.title;

window.addEventListener('blur', function(){
    document.title = 'Don\'t forget to read this...';
});

window.addEventListener('focus', function(){
    document.title = originalPageTitle;
});
2
stacigh

Cela pourrait fonctionner après tout, je suis devenu 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 précisément ce que vous voulez, mais de façon laide. La chose est, Chrome semble ignorer le changement de titre de temps en temps (lorsque passer à l'onglet et maintenir la souris enfoncée pendant 1 seconde semble toujours créer cet effet).

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

conclusion: quoi que vous fassiez, ne faites pas confiance au résultat lorsque vous le testez!

2
Bastiaan Linders

J'ai trouvé que l'ajout d'événements onblur = et onfocus = pour contourner le problème:

0
Trass Vasston

Cela pourrait fonctionner avec JQuery

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

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