Detect If Browser Tab Has Focus

Question

Is there a reliable cross-browser way to detect that a tab has focus   The scenario is that we have an application that polls regularly for stock prices  and if the page doesn t have focus we could stop the polling and save everyone the traffic noise  especially as people are fans of opening several tabs with different portfolios   Is window onblur and window onfocus an option for this

User · Answer

Surprising to see nobody mentioned document hasFocus  if  document hasFocus    console log  Tab is active     MDN has more information

User · Answer

While searching about this problem  I found a recommendation that Page Visibility API should be used  Most modern browsers support this API according to Can I Use  http   caniuse com  feat pagevisibility   Here s a working example  derived from this snippet      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                     Update  The example above used to have prefixed properties for Gecko and WebKit browsers  but I removed that implementation because these browsers have been offering Page Visibility API without a prefix for a while now  I kept Microsoft specific prefix in order to stay compatible with IE10

User · Answer

Cross Browser jQuery Solution  Raw available at GitHub   Fun  amp  Easy to Use   The following plugin will go through your standard test for various versions of IE  Chrome  Firefox  Safari  etc   and establish your declared methods accordingly  It also deals with issues such as    onblur  blur onfocus  focus  duplicate  calls window losing focus through selection of alternate app  like word  This tends to be undesirable simply because  if you have a bank page open  and it s onblur event tells it to mask the page  then if you open calculator  you can t see the page anymore   Not triggering on page load   Use is as simple as  Scroll Down to  Run Snippet     winFocus function event  isVisible        console log  Combo t t   event  isVisible            OR Pass False boolean  and it will not trigger on load      Instead  it will first trigger on first blur of current tab window   winFocus function event  isVisible        console log  Combo t t   event  isVisible      false        OR Establish an object having methods  blur   amp   focus   and or  blurFocus       yes  you can set all 3  tho blurFocus is the only one with an  isVisible  param    winFocus       blur  function event            console log  Blur t t   event              focus  function event            console log  Focus t t   event                  OR First method becoms a  blur   second method becoms  focus     winFocus function event        console log  Blur t t   event      function event        console log  Focus t t   event          x000D   x000D        Begin Plugin       x000D     function      winFocus     extend  winFocus function   var a  0 b      document  data  winFocus      document  data  winFocus    winFocus init    for x in arguments  object   typeof arguments x   arguments x  blur amp  amp   winFocus methods blur push arguments x  blur  arguments x  focus amp  amp   winFocus methods focus push arguments x  focus  arguments x  blurFocus amp  amp   winFocus methods blurFocus push arguments x  blurFocus  arguments x  initRun amp  amp  a arguments x  initRun    function   typeof arguments x  b push arguments x    x000D   boolean   typeof arguments x  amp  amp  a arguments x   b amp  amp  1  b length   winFocus methods blurFocus push b 0      winFocus methods blur push b 0     winFocus methods focus push b 1     if a   winFocus methods onChange        winFocus init function     winFocus props hidden in document document addEventListener  visibilitychange    winFocus methods onChange     winFocus props hidden  mozHidden  in document document addEventListener  mozvisibilitychange    winFocus methods onChange     winFocus props hidden  x000D   webkitHidden  in document document addEventListener  webkitvisibilitychange    winFocus methods onChange     winFocus props hidden  msHidden  in document document addEventListener  msvisibilitychange    winFocus methods onChange     winFocus props hidden  onfocusin  in document document onfocusin document onfocusout   winFocus methods onChange window onpageshow window onpagehide window onfocus window onblur   winFocus methods onChange return   winFocus    winFocus methods  blurFocus    blur    focus     x000D  exeCB function a    winFocus methods blurFocus amp  amp   each   winFocus methods blurFocus function b c  this apply   winFocus  a  a hidden     a hidden amp  amp   winFocus methods blur amp  amp   each   winFocus methods blur function b c  this apply   winFocus  a      a hidden amp  amp   winFocus methods focus amp  amp   each   winFocus methods focus function b c  this apply   winFocus  a      onChange function a  var b  focus  1 focusin  1 pageshow  1 blur  0 focusout  0 pagehide  0  if a a  window event a hidden a type in b b a type   x000D  document   winFocus props hidden    window  data  visible   a hidden    winFocus methods exeCB a  else try   winFocus methods onChange call document new Event  visibilitychange    catch c        winFocus props  hidden  hidden      jQuery   x000D        End Plugin         x000D   x000D     Simple example x000D    function     x000D     winFocus function event  isVisible    x000D       td tbody   empty    x000D      each event  function i    x000D        td tbody   append  x000D          lt tr   gt    append  x000D           lt th   gt      text  i     x000D           lt td   gt      text  this toString      x000D        x000D       x000D        x000D    if  isVisible   x000D         isVisible   stop   delay 100  fadeOut  fast   function e    x000D         body   addClass  visible    x000D        this  stop   text  TRUE   fadeIn  slow    x000D         x000D    else   x000D        body   removeClass  visible    x000D         isVisible   text  FALSE    x000D      x000D       x000D     x000D  body   background   AAF    x000D  table   width  100     x000D  table table   border-collapse  collapse  margin  0 auto  width  auto    x000D  tbody  gt  tr  gt  th   text-align  right    x000D  td   width  50     x000D  th  td   padding   1em  5em    x000D  td th  td td   border  1px solid    x000D   visible   background   FFA    x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 9 1 jquery min js  gt  lt  script gt  x000D   lt h3 gt See Console for Event Object Returned lt  h3 gt  x000D   lt table gt  x000D       lt tr gt  x000D           lt th gt  lt p gt Is Visible  lt  p gt  lt  th gt  x000D           lt td gt  lt p id  isVisible  gt TRUE lt  p gt  lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D           lt td colspan  2  gt  x000D               lt table gt  x000D                   lt thead gt  x000D                       lt tr gt  x000D                           lt th colspan  2  gt Event Data  lt span style  font-size   8em   gt   See Console for More Details   lt  span gt  lt  th gt  x000D                       lt  tr gt  x000D                   lt  thead gt  x000D                   lt tbody gt  lt  tbody gt  x000D               lt  table gt  x000D           lt  td gt  x000D       lt  tr gt  x000D   lt  table gt  x000D   x000D   x000D

User · Answer

Important Edit  This answer is outdated  Since writing it  the Visibility API  mdn  example  spec  has been introduced  It is the better way to solve this problem     var focused   true   window onfocus   function         focused   true     window onblur   function         focused   false       AFAIK  focus and blur are all supported on   everything   see http   www quirksmode org dom events index html

User · Answer

I would do it this way  Reference http   www w3 org TR page-visibility         window onload   function                 check the visiblility of the page         var hidden  visibilityState  visibilityChange           if  typeof document hidden      undefined                 hidden    hidden   visibilityChange    visibilitychange   visibilityState    visibilityState                     else if  typeof document mozHidden      undefined                 hidden    mozHidden   visibilityChange    mozvisibilitychange   visibilityState    mozVisibilityState                     else if  typeof document msHidden      undefined                 hidden    msHidden   visibilityChange    msvisibilitychange   visibilityState    msVisibilityState                     else if  typeof document webkitHidden      undefined                 hidden    webkitHidden   visibilityChange    webkitvisibilitychange   visibilityState    webkitVisibilityState                       if  typeof document addEventListener      undefined     typeof hidden      undefined                    not supported                   else               document addEventListener visibilityChange  function                     console log  hidden      document hidden                    console log document visibilityState                     switch  document visibilityState                     case  visible                          visible                     break                  case  hidden                          hidden                     break                                   false                      if  document visibilityState       visible                    visible

User · Answer

Yes  window onfocus and window onblur should work for your scenario   http   www thefutureoftheweb com blog detect-browser-window-focus

[javascript] Detect If Browser Tab Has Focus

Examples related to javascript

Examples related to optimization

Examples related to polling