Existe-t-il un moyen de détecter que cette fenêtre est actuellement active dans IE8?

Existe-t-il un moyen de détecter que la fenêtre est actuellement active (s'affiche sur l'onglet / la fenêtre active) dans IE8?

Je sais qu'il y a des événements comme onfocusin / onfocus – mais ce n'est pas une solution parfaite, car la fenêtre doit également recevoir le focus pour l'événement à déclencher, ce qui ne fonctionne pas lorsque l'utilisateur suffit de basculer les onglets sans toucher la fenêtre elle-même.

Je crois qu'il doit y avoir une solution simple et élégante pour un tel cas d'utilisation ordinaire.

J'ai écrit un plugin jQuery qui fait ceci: http://mths.be/visibility Il vous donne une API très simple qui vous permet d'exécuter des rappels lorsque l'état de visibilité de la page change.

Il le fait en utilisant l' API de visibilité de la page où il est pris en charge, et retombe à l'ancienne focus et au blur dans les anciens navigateurs.

Demo: http://mathiasbynens.be/demo/jquery-visibility

Ce plugin fournit simplement deux événements personnalisés à utiliser: show et hide . Lorsque l'état de visibilité de la page change, l'événement approprié sera déclenché.

Vous pouvez les utiliser séparément:

 $(document).on('show', function() { // the page gained visibility }); 

…et…

 $(document).on('hide', function() { // the page was hidden }); 

Comme la plupart du temps, vous aurez besoin des deux événements, votre meilleure option est d'utiliser une carte d'événements. De cette façon, vous pouvez lier les deux gestionnaires d'événements en une seule fois:

 $(document).on({ 'show': function() { console.log('The page gained visibility; the `show` event was triggered.'); }, 'hide': function() { console.log('The page lost visibility; the `hide` event was triggered.'); } }); 

Le plug-in détectera si l'API de visibilité de la page est prise en charge de manière native dans le navigateur ou non, et exposez ces informations comme un boolean ( true / false ) dans $.support.pageVisibility :

 if ($.support.pageVisibility) { // Page Visibility is natively supported in this browser } 
var isActive = false; function onBlur() { isActive = false; }; function onFocus(){ isActive = true; }; if (/*@cc_on!@*/false) { // check for Internet Explorer document.onfocusin = onFocus; document.onfocusout = onBlur; } else { window.onfocus = onFocus; window.onblur = onBlur; }
var isActive = false; function onBlur() { isActive = false; }; function onFocus(){ isActive = true; }; if (/*@cc_on!@*/false) { // check for Internet Explorer document.onfocusin = onFocus; document.onfocusout = onBlur; } else { window.onfocus = onFocus; window.onblur = onBlur; } 

C'est une tâche simple à utiliser en utilisant jQuery:

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

La variable globalAActive détermine si l'onglet / fenêtre est activé.

 <script> // Adapted slightly from Sam Dutton // Set name of hidden property and visibility change event // since some browsers only offer vendor-prefixed support var hidden, state, visibilityChange; if (typeof document.hidden !== "undefined") { hidden = "hidden"; visibilityChange = "visibilitychange"; state = "visibilityState"; } else if (typeof document.mozHidden !== "undefined") { hidden = "mozHidden"; visibilityChange = "mozvisibilitychange"; state = "mozVisibilityState"; } else if (typeof document.msHidden !== "undefined") { hidden = "msHidden"; visibilityChange = "msvisibilitychange"; state = "msVisibilityState"; } else if (typeof document.webkitHidden !== "undefined") { hidden = "webkitHidden"; visibilityChange = "webkitvisibilitychange"; state = "webkitVisibilityState"; } // Add a listener that constantly changes the title document.addEventListener(visibilityChange, function() { document.title = document[state]; }, false); // Set the initial value document.title = document[state]; </script>