Cómo comprobar si el navegador tiene el foco en JavaScript

Cada vez son más las páginas web están incorporando funciones de JavaScript que se ejecutan en ciclos a intervalos regulares , ya sea para hacer ping a una dirección URL para las actualizaciones o para proporcionar una mayor interactividad del usuario con la página. Desafortunadamente , JavaScript consume los recursos de la máquina del cliente , incluyendo el procesamiento de la unidad central de uso, memoria y ancho de banda. Con esto en mente , se considera una buena práctica para que los programadores no gravar esos recursos cuando el usuario no tiene necesidad de ellos. Una manera de hacerlo es comprobar si el navegador (o una pestaña específica en el navegador ) está activa y activar /desactivar las funciones en consecuencia. Instrucciones
1

crear dos funciones , una para cuando el navegador está en el foco , y otro para cuando su enfoque es borrosa :

var onFocus = function ( ) {
< p > //insertar código para ejecutar cuando la ventana se ha ganado foco

} ; .

var onBlur = function ( ) {

//código de inserción para funcionar cuando el ventana se ha perdido el foco

} ; .
2

Incorporar detección de características . Esto es principalmente para Internet Explorer , pero lo mejor es utilizar la detección de función en lugar de la detección del navegador , ya que es más confiable para probar directamente para la función que desea manipular. Internet Explorer utiliza el document.onfocusin propiedad y document.onfocusout lugar de window.onfocus y window.onbur , por lo que tendrá que comprobar para ver si se definen las propiedades del documento :

if ( document.onfocusin = ! = undefined) { var

onfocusin = true;

} else {

onfocusin var = false; }

3

Complete el código mediante la unión de los eventos de enfoque /desenfoque adecuadas para las funciones creadas en el paso 1 :

if ( onfocusin === true) {

document.onfocusin = onFocus ;

document.onfocusout = onBlur ;

} else {

window.onfocus = onFocus ;

window.onblur = onBlur ;
< p >}