habilitar - javascript definicion

Cómo saber si el navegador/pestaña está activo

Question

Posible duplicado:
¿Hay alguna forma de detectar si una ventana del navegador no está activa actualmente?

Tengo una función que se llama cada segundo que solo quiero ejecutar si la página actual está en primer plano, es decir, el usuario no ha minimizado el navegador o ha cambiado a otra pestaña. No sirve para nada si el usuario no lo está mirando y es potencialmente intensivo en la CPU, por lo que no quiero simplemente perder ciclos en segundo plano.

¿Alguien sabe cómo decir esto en JavaScript?

Nota: uso jQuery, así que si tu respuesta usa eso, está bien :).

Answer 1

Además de la respuesta de Richard Simões , también puede utilizar la API de visibilidad de página .

if (!document.hidden) {
    // do what you need
}

Esta especificación define un medio para que los desarrolladores de sitios determinen de manera programática el estado de visibilidad actual de la página para desarrollar aplicaciones web eficientes con CPU y energía.

Aprende más

• http://davidwalsh.name/page-visibility
• https://developers.google.com/chrome/whitepapers/pagevisibility
• Ejemplo de pausa de un video cuando la ventana / pestaña está oculta
  https://web.archive.org/web/20170609212707/http://www.samdutton.com/pageVisibility/

Answer 2

Intentaría establecer una bandera en los eventos window.onfocus y window.onblur .

El siguiente fragmento de código se ha probado en Firefox, Safari y Chrome, abre la consola y muévete entre las pestañas de un lado a otro:

var isTabActive;

window.onfocus = function () { 
  isTabActive = true; 
}; 

window.onblur = function () { 
  isTabActive = false; 
}; 

// test
setInterval(function () { 
  console.log(window.isTabActive ? ''active'' : ''inactive''); 
}, 1000);

Pruébalo here .

Answer 3

Si está intentando hacer algo similar a la página de búsqueda de Google cuando está abierto en Chrome (donde ciertos eventos se activan cuando se "enfoca" en la página), el evento hover () puede ayudar.

$(window).hover(function() {
  // code here...
});

Answer 4

Todos los ejemplos aquí (con la excepción de los de rockacola) requieren que el usuario haga clic físicamente en la ventana para definir el enfoque. Esto no es ideal, por lo que .hover() es la mejor opción:

$(window).hover(function(event) {
    if (event.fromElement) {
        console.log("inactive");
    } else {
        console.log("active");
    }
});

Esto te dirá cuándo el usuario tiene su mouse en la pantalla, aunque todavía no te dirá si está en primer plano con el mouse del usuario en otra parte.

Answer 5

Usando jQuery:

$(function() {
    window.isActive = true;
    $(window).focus(function() { this.isActive = true; });
    $(window).blur(function() { this.isActive = false; });
    showIsActive();
});

function showIsActive()
{
    console.log(window.isActive)
    window.setTimeout("showIsActive()", 2000);
}

function doWork()
{
    if (window.isActive) { /* do CPU-intensive stuff */}
}

Answer 6

blur eventos de focus y blur de la ventana:

var interval_id;
$(window).focus(function() {
    if (!interval_id)
        interval_id = setInterval(hard_work, 1000);
});

$(window).blur(function() {
    clearInterval(interval_id);
    interval_id = 0;
});

Para responder al problema comentado de "Double Fire" y mantenerse dentro de la facilidad de uso de jQuery:

$(window).on("blur focus", function(e) {
    var prevType = $(this).data("prevType");

    if (prevType != e.type) {   //  reduce double fire issues
        switch (e.type) {
            case "blur":
                // do work
                break;
            case "focus":
                // do work
                break;
        }
    }

    $(this).data("prevType", e.type);
})

Haga clic para ver el código de ejemplo que muestra su funcionamiento (JSFiddle)