¿Cómo detectar cuando una pestaña está enfocada o no en Chrome con Javascript?

Question

Necesito saber si el usuario está actualmente viendo una pestaña o no en Google Chrome. Intenté usar el desenfoque de eventos y el enfoque enlazado a la ventana, pero solo el desenfoque parece estar funcionando correctamente.

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

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

El evento raro enfoque funciona, sólo a veces. Si cambio a otra pestaña y viceversa, el evento de enfoque no se activará. Pero si hago clic en la barra de direcciones y vuelvo a la página, lo hará. O si cambio a otro programa y vuelvo a Chrome, se activará si la pestaña está enfocada actualmente.

Answer 1

2015 actualización: La nueva forma de HTML5 con la API de visibilidad (tomado del comentario de Blowsie):

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

---

El código de su creador original da (en la pregunta) ahora trabaja, a partir de 2011 :

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

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

edición: a partir de unos meses más tarde en Chrome 14, este seguirá funcionando, pero el el usuario debe haber interactuado con la página haciendo clic en cualquier lugar de la ventana al menos una vez. Simplemente desplazarse y eso es insuficiente para que esto funcione. Hacer window.focus() no hace que esto funcione automáticamente tampoco. Si alguien sabe de una solución alternativa, por favor mencione.

Answer 2

Podría funcionar después de todo, me picó la curiosidad y escribí este código:

... 
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> 

Este código hace Precisa lo que quiere, sino en una manera fea. La cuestión es que Chrome parece ignorar el cambio de título de vez en cuando (al cambiar a la pestaña y mantener presionado el botón del mouse durante 1 segundo, parece que siempre crea este efecto).

Obtendrá diferentes valores en la pantalla, pero su título no cambiará.

conclusión: ¡Hagas lo que hagas, no confíes en el resultado al probarlo!

Answer 3

He encontrado que la adición de onblur = y onfocus = eventos para Inline por alto el tema:

Answer 4

en cromo puede ejecutar una secuencia de comandos de fondo con un tiempo de espera de menos de 1 segundo, y cuando la pestaña no tiene foco Chrome solo lo ejecutará cada segundo. Ejemplo;

Esto no funciona en Firefox u Opera. No sé sobre otros navegadores, pero dudo que funcione allí también.

var currentDate = new Date(); 
var a = currentDate.getTime(); 

function test() { 
    var currentDate = new Date(); 
    var b = currentDate.getTime(); 
var c = b - a; 
    if (c > 900) { 
     //Tab does not have focus. 
    } else { 
     //It does 
    } 
    a = b; 
    setTimeout("test()",800); 
} 



setTimeout("test()",1); 

Answer 5

Esto podría trabajar con jQuery

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

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

Answer 6

La respuesta seleccionada para la pregunta Is there a way to detect if a browser window is not currently active? debería funcionar. Utiliza el Page Visibility API redactado por el W3C el 2011-06-02.

Answer 7

Para cualquier persona que quiera cambiar los títulos de página en la falta de definición y luego volver a la página de título original de enfoque:

// 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; 
});