Comment détecter un onglet inactif et le remplir de couleur

Question

Comment remplir mon site web avec des couleurs si l'onglet est inactif? Je voudrais donner un effet d'écran à mon site si l'utilisateur passe à une autre fenêtre. Puis-je faire ça avec jQuery?

Answer 1

Voici un code de base pour vous y aller:

<script type="text/javascript"> 
document.onmousemove = resetTimer; 
window.onload = function() { 
    screenTimer = setTimeout(inactive, 2000); 
} 
function inactive(){ 
    // screen saver goes here 
    document.body.style.backgroundColor = "black"; 
} 
function resetTimer(e) { 
    // undo screen saver here 
    document.body.style.backgroundColor = "white"; 
    // reset timer 
    clearTimeout(screenTimer); 
    screenTimer = setTimeout(inactive, 2000); 
} 
</script> 

En utilisant jquery vous pourriez probablement nettoyer ça un peu, mais cela devrait donner une base simple à construire à partir de. Fondamentalement, nous continuons à appeler le "économiseur d'écran de démarrage" toutes les 2 secondes, mais si vous déplacez votre souris, il annule le minuteur et le redémarre. Note: setTimeout utilise des millisecondes donc 1000 = 1 seconde.

Answer 2

Utilisation window.onfocus() et window.onblur() - voir http://www.thefutureoftheweb.com/demo/2007-05-16-detect-browser-window-focus/ pour démonstration