¿Cómo se puede detectar si una página está en segundo plano o en primer plano con jquery/javascript?

Question

El título se explica a sí mismo. ¿Cómo puedo detectar si una página web se ha ido al fondo?

Estoy implementando una aplicación de chat y usaré esta información para decidir mostrar las notificaciones de los mensajes nuevos. Supongo que GMail usa algo así. Si la página está en segundo plano, muestra las notificaciones de escritorio (en cromo), si no, no las muestra.

Answer 1

Sé que la respuesta ya se ha seleccionado, pero quería compartir otra.

Puede usar el método hasFocus en el document para ver si tiene el foco. No hay razón para establecer su propia variable.

Aquí hay algunos códigos de prueba de concepto. jsFiddle está en la parte inferior. Cada 3 segundos comprobará si la ventana tiene foco o no, mostrando verdadero o falso.

HTML:

<p>This will show if the document has focus every three seconds</p> 
<button id="go">Go</button> 
<button id="stop">Stop</button> 

<ul id="active_log"> 
</ul> 

CSS:

#stop { display: none; } 

Javascript en el interior en el documento listo:

var timeout = null; 

var checkActive = function() { 
    var isActive = window.document.hasFocus(), 
     $activity = $("<li />").text(isActive.toString()); 

    $('#active_log').prepend($activity).find('li:nth-child(n+6)').fadeOut(function() { 
     $(this).remove(); 
    }); 

    timeout = setTimeout(checkActive, 3000); 
} 

$('#go').click(function() { 
    $(this).hide().siblings('button').show(); 
    checkActive(); 
}); 

$('#stop').click(function() { 
    $(this).hide().siblings('button').show(); 
    clearTimeout(timeout); 
    timeout = null; 
}); 

http://jsfiddle.net/natedavisolds/2D7za/1/

Answer 2

Puede enlazar a los eventos windowblur y focus. Aquí es un fragmento de código an app I wrote:

$(window).bind("blur", function() { 
    Chatterbox.set_focused(false); 
}); 

$(window).bind("focus", function() { 
    Chatterbox.set_focused(true); 
}); 

Answer 3

Ahora hay un page visibility API para esto, y que está bien soportado por todas las versiones más recientes de los principales navegadores en Windows, Mac OS X y Linux (aunque no tengo no probado realmente todos los navegadores con una parte justa del mercado de los navegadores Linux).

La API de visibilidad de página es ahora el mejor enfoque para controlar la visibilidad; las únicas advertencias son que no puede decirle qué partes de la ventana del navegador son visibles (solo que no hay nada visible o al menos una parte), y ese soporte solo ha estado presente desde 2016 en Linux, 2015 en Mac y 2014 (posiblemente antes) en Windows.

Mientras se lanzaba la compatibilidad, un falso negativo era raro, pero se producían falsos positivos en algunas plataformas; por ejemplo, en 2014, OSX presentó versiones en miniatura de aplicaciones minimizadas en el dock, y como resultado de la forma en que esto se hizo, una aplicación no pudo determinar fácilmente si se minimizó, ya que aún se le pidió que pintara la pantalla. Linux tuvo complicaciones al saber si su aplicación estaba en un espacio de trabajo no visible, y si otra ventana estaba ocluyéndola.

El primer borrador público se publicó en junio de 2011 y alcanzó el estado de "recomendación" en mayo de 2013. En marzo de 2014, las versiones más recientes de todos los navegadores principales de Windows tenían soporte completo para el estándar. El soporte completo para todos los principales navegadores de Mac se logró en abril de 2015. Se logró el soporte de Linux para al menos Chromium en agosto de 2016 (cuando se cerró Chromium issue 293128); aunque no los he probado, espero que otros navegadores Linux hayan seguido el mismo ritmo, ya que la parte más difícil del trabajo parece haber sido ajustar el OS/GUI para sacar contratos y API para saber si su aplicación de escritorio es visible.