Maison >interface Web >js tutoriel >Comment puis-je détecter la visibilité du navigateur ou des onglets à l'aide de JavaScript ?

Comment puis-je détecter la visibilité du navigateur ou des onglets à l'aide de JavaScript ?

Linda Hamilton
Linda Hamiltonoriginal
2024-12-01 03:49:10607parcourir

How Can I Detect Browser or Tab Visibility Using JavaScript?

Détermination de la visibilité du navigateur/onglet

Pour vérifier si le navigateur ou un onglet spécifique est actif, JavaScript propose plusieurs méthodes :

1. API de visibilité de la page

Les navigateurs modernes prennent en charge l'API de visibilité de la page, qui vous permet de vérifier l'état de visibilité de la page à l'aide de la propriété document.hidden :

if (!document.hidden) {
    // Do your desired actions
}

2. jQuery Event Listener

jQuery propose une approche plus simple en utilisant des écouteurs d'événements :

$(window).on("focus", function() {
    // Browser/tab is now active
}).on("blur", function() {
    // Browser/tab is now inactive
});

3. Événements de visibilité de la page

Vous pouvez également écouter des événements de visibilité de page spécifiques :

document.addEventListener("visibilitychange", function() {
    if (document.visibilityState === "visible") {
        // Browser/tab is visible
    } else {
        // Browser/tab is hidden
    }
});

4. Méthodes spécifiques au navigateur

Différents navigateurs peuvent fournir leurs propres méthodes :

  • Chrome : document.webkitHidden
  • Firefox : document.mozHidden
  • Internet Explorer : document.msHidden

Ressources supplémentaires

Pour une exploration plus approfondie :

  • [API de visibilité des pages documentation](https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API)
  • [documentation de l'événement jQuery](https://api.jquery.com/focus/)
  • [Visibilité du navigateur événements](https://caniuse.com/mdn-api_document_visiblestate)
  • [Applications Web économes en énergie utilisant l'API Page Visibility](https://developers.google.com/chrome/whitepapers/pagevisibility)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn