javascript - Detectar si la pestaña del navegador tiene el foco

¿Existe una forma fiable de detectar en todos los navegadores que una pestaña tiene el foco?

El escenario es que tenemos una aplicación que consulta regularmente los precios de las acciones, y si la página no tiene el foco podríamos detener las consultas y ahorrar a todos el ruido del tráfico, especialmente ya que a las personas les gusta abrir varias pestañas con diferentes carteras.

¿Es window.onblur y window.onfocus una opción para esto?

Respuesta #1

Sí, window.onfocus y window.onblur deberían funcionar para tu escenario.

Respuesta #2

Sorprende ver que nadie mencionó document.hasFocus

if (document.hasFocus()) console.log('Tab is active')

MDN tiene más información.

Respuesta #3

Edición Importante: Esta respuesta está desactualizada. Desde que se escribió, se ha introducido la API de Visibilidad (mdn, ejemplo, especificación). Es la mejor manera de resolver este problema.

var focused = true;

window.onfocus = function() {
    focused = true;
};
window.onblur = function() {
    focused = false;
};

Hasta donde sé, focus y blur son compatibles con... todo. (ver http://www.quirksmode.org/dom/events/index.html )

Respuesta #4

Mientras buscaba sobre este problema, encontré una recomendación de que se debería usar la API de Visibilidad de Página. La mayoría de los navegadores modernos soportan esta API según Can I Use: http://caniuse.com/#feat=pagevisibility.

Aquí hay un ejemplo funcional (derivado de este fragmento):

$(document).ready(function() {
  var hidden, visibilityState, visibilityChange;

  if (typeof document.hidden !== "undefined") {
    hidden = "hidden", visibilityChange = "visibilitychange", visibilityState = "visibilityState";
  } else if (typeof document.msHidden !== "undefined") {
    hidden = "msHidden", visibilityChange = "msvisibilitychange", visibilityState = "msVisibilityState";
  }

  var document_hidden = document[hidden];

  document.addEventListener(visibilityChange, function() {
    if(document_hidden != document[hidden]) {
      if(document[hidden]) {
        // Document hidden
      } else {
        // Document shown
      }

      document_hidden = document[hidden];
    }
  });
});

Actualización: El ejemplo anterior solía tener propiedades con prefijo para los navegadores Gecko y WebKit, pero eliminé esa implementación porque estos navegadores han estado ofreciendo la API de Visibilidad de Página sin prefijo desde hace un tiempo. Mantuvé el prefijo específico de Microsoft para seguir siendo compatible con IE10.

Respuesta #5

Publicando esta respuesta porque encontré un error en la respuesta aceptada.

El error ocurre cuando abres la consola de desarrollador en la ventana enfocada y haces clic en cualquier parte de ella, la consola de desarrollador tiene ahora el foco, en este punto window.onfocus o window.onblur no tienen ningún efecto.

Entonces, aquí está mi solución,

document.addEventListener("visibilitychange", function() {
    if (document.visibilityState === 'visible') {
        console.log('has focus');
    } else {
        console.log('lost focus');
    }
});