javascript - Upptäck om webbläsarfliken har fokus

Finns det ett pålitligt sätt som fungerar i alla webbläsare för att upptäcka om en flik har fokus.

Scenariot är att vi har en applikation som regelbundet hämtar aktiekurser, och om sidan inte har fokus kan vi stoppa hämtningen och spara trafik för alla, särskilt eftersom folk gillar att öppna flera flikar med olika portföljer.

Är window.onblur och window.onfocus ett alternativ för detta?

Svar #1

Ja, window.onfocus och window.onblur borde fungera för ditt scenario.

Svar #2

Överraskande att se att ingen nämnde document.hasFocus

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

MDN har mer information.

Svar #3

Viktig redigering: Detta svar är inaktuellt. Sedan det skrevs har Visibility API (mdn, exempel, specifikation) introducerats. Det är det bättre sättet att lösa detta problem.

var focused = true;

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

Såvitt jag vet stöds focus och blur på...allt. (se http://www.quirksmode.org/dom/events/index.html )

Svar #4

När jag sökte om detta problem, hittade jag en rekommendation att Page Visibility API bör användas. De flesta moderna webbläsare stöder detta API enligt Can I Use: http://caniuse.com/#feat=pagevisibility.

Här är ett fungerande exempel (hämtat från denna kodsnutt):

$(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];
    }
  });
});

Uppdatering: Exemplet ovan hade tidigare prefixerade egenskaper för Gecko- och WebKit-webbläsare, men jag tog bort den implementeringen eftersom dessa webbläsare har erbjudit Page Visibility API utan prefix ett tag nu. Jag behöll Microsoft-specifika prefixet för att förbli kompatibel med IE10.

Svar #5

Postar detta svar eftersom jag hittade en bugg i det accepterade svaret.

Buggen uppstår när du öppnar en utvecklarkonsol på det fokuserade fönstret och klickar någonstans på det, utvecklarkonsolen har nu fokus, vid denna punkt har window.onfocus eller window.onblur ingen effekt alls.

Så här är min lösning,

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