Détecter l'activation des onglets/fenêtres en JavaScript

Question

Il semble que Google+ vérifie les mises à jour des notifications lorsque j'active l'onglet dans Firefox.

Elle affiche "0" à chaque fois que je l'active, mais se transforme en un certain nombre de nouvelles notifications quelques secondes plus tard.

Quel est le mécanisme permettant d'exploiter cet événement ? Existe-t-il un événement DOM spécifique pour cela ? Ou utilise-t-il quelque chose comme au passage de la souris et considérer toute activité comme un indicateur suffisant de l'activation de l'onglet ?

Answer 1

Ce n'est qu'une supposition car je n'ai pas tous les navigateurs pertinents à ma disposition pour les tester.

Et si vous utilisiez le focus sur l'événement window . Cette fonction est invoquée chaque fois que l'utilisateur clique quelque part, mais aussi lorsqu'il change d'onglet. Pour faire la distinction entre les actions d'un utilisateur sur la page et le changement d'onglet d'un utilisateur, vous pouvez vérifier si l'événement explicitOriginalTarget pointe vers le window .

window.onfocus=function(event){
    if(event.explicitOriginalTarget===window){
        console.log('switched from tab');
    }
}

Answer 2

Il y a Visibilité de la page qui décrit document.onvisibilitychange gestionnaire d'événements.

L'usage

document.onvisibilitychange = function() { 
  console.log("Visibility of page has changed!");
};

Answer 3

Malheureusement, il n'y a pas de solution précise à 100%.

onvisibilitychange se déclenche correctement sur les changements d'onglet, mais pas sur les changements de fenêtre (ALT+TAB) l'événement visibilitychange n'est pas déclenché lors du changement de programme/fenêtre avec ALT+TAB ou en cliquant dans la barre des tâches

---

window.onfocus se déclenche lorsque le document devient focalisé. Cela fonctionne comme prévu si le focus de l'onglet est déjà à l'intérieur de la page web, et se déclenche correctement lorsque le document devient focalisé. fenêtre o onglet se concentre.

Mais si vous avez le focus sur la barre d'URL, ou dans la console, vous êtes déjà "hors focus", et quand vous sortez de l'écran de l'ordinateur, c'est que vous n'avez pas le focus. fenêtre o onglet et de retour, vous resterez "hors champ", de sorte que cet événement ne se déclenchera pas tant que vous ne cliquerez pas dans la page ou que vous n'y naviguerez pas au moyen de la touche TAB.

---

Vous pouvez tester ci-dessous comment chaque événement se déclenche (cliquez à l'intérieur de l'iframe blanc pour tester les événements onfocus/onblur)

window.onfocus = () => console.log("focus");

window.onblur = () => console.log("out of focus");

document.onvisibilitychange = () => console.log("visibilityState: ", document.visibilityState);