gratis - habilitar javascript en chrome en windows

¿Cómo detectar cuándo 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 de enfoque funciona raro, solo algunas 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

Descubrí que agregar onblur = y onfocus = events a en línea eludía el problema:

Answer 2

En Chrome, puede ejecutar un script de fondo con un tiempo de espera de menos de 1 segundo, y cuando la pestaña no tenga el 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 3

Esto podría funcionar con JQuery

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

Answer 4

La respuesta seleccionada para la pregunta ¿Hay alguna manera de detectar si una ventana del navegador no está activa actualmente? Deberia trabajar. Utiliza la API Visibilidad de página redactada por el W3C el 2011-06-02.

Answer 5

Para cualquiera que quiera cambiar los títulos de las páginas en borrosidad y luego volver al título de la página original en foco:

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

Answer 6

Podría funcionar después de todo, me puse curioso 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 exactamente lo que quieres, pero de 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 su pantalla, pero su título no cambiará.

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

Answer 7

Actualización de 2015: la nueva forma de HTML5 con API de visibilidad (tomada del comentario de Blowsie):

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

El código que da el póster original (en la pregunta) ahora funciona, a partir de 2011:

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

editar : a partir de unos meses más tarde en Chrome 14, esto seguirá funcionando, pero 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() tampoco hace que esto funcione automáticamente. Si alguien sabe de una solución alternativa, por favor mencione.