Hace algún tiempo os hablé de una nueva Api llamada Page Visibility, con la que teníamos la capacidad de detectar cuándo un usuario tenía la ventana visible. Sin embargo, esto no garantiza que el usuario esté realizando acciones sobre nuestro sitio web, simplemente que no está oculto en la barra de tareas, detrás de otras ventanas, en otro tab, etcétera.
En este post me gustaría hablaros de la posibilidad de detectar cuándo la página tiene el foco o, lo que es lo mismo, cuándo el usuario está trabajando con nuestra aplicación.
Evento hasFocus
El método hasFocus nos permite comprobar, a través de true o false, si en un momento determinado el documento está activo. Al no tratarse de un evento, es necesario realizar la comprobación periódicamente o bien a consecuencia de otra acción:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
div {
width: 384px;
height: 308px;
}
.withoutFocus {
color: white;
background-image: url('/images/shrek-cat.jpg');
}
.withFocus {
color: white;
background-image: url('/images/shrek-donkey.jpg');
}
</style>
</head>
<body>
<div id="userAction">
</div>
<script>
window.onload = function () {
var message = document.getElementById('userAction');
setInterval(function () {
if (document.hasFocus()) {
message.className = "withFocus";
message.innerHTML = "The document has the focus.";
}
else {
message.className = "withoutFocus";
message.innerHTML = "The document doesn't have the focus";
}
}, 200);
};
</script>
</body>
</html>
Si hacemos clic fuera del documento (por ejemplo en la barra de direcciones) comprobaremos que tanto el texto como la imagen cambian. En este caso se está haciendo una comprobación cada 200 milisegundos a través de un setInterval, donde comprobaremos si el documento sigue teniendo el foco.
Este ejemplo es extremadamente simple, pero puede ser utilizado para paralizar las actualizaciones del sitio, compaginarlo con Page Visibility, utilizarlo como fallback si no está soportada la Api comentada, etcétera.
Espero que haya sido de utilidad.
¡Saludos!