Is there a way to detect if a browser window is not currently active

Question

I have JavaScript that is doing activity periodically  When the user is not looking at the site  i e   the window or tab does not have focus   it d be nice to not run   Is there a way to do this using JavaScript   My reference point  Gmail Chat plays a sound if the window you re using isn t active

User · Answer

this worked for me document addEventListener  quot visibilitychange quot   function           document title   document hidden    quot I m away quot     quot I m here quot        demo  https   iamsahilralkar github io document-hidden-demo

User · Answer

Here is a solid  modern solution   Short a sweet    document addEventListener  visibilitychange        gt      console log  document hasFocus          This will setup a listener to trigger when any visibility event is fired which could be a focus or blur

User · Answer

This is really tricky  There seems to be no solution given the following requirements    The page includes iframes that you have no control over You want to track visibility state change regardless of the change being triggered by a TAB change  ctrl tab  or a window change  alt tab    This happens because    The page Visibility API can reliably tell you of a tab change  even with iframes   but it can t tell you when the user changes windows  Listening to window blur focus events can detect alt tabs and ctrl tabs  as long as the iframe doesn t have focus    Given these restrictions  it is possible to implement a solution that combines  - The page Visibility API - window blur focus - document activeElement  That is able to    1  ctrl tab when parent page has focus  YES 2  ctrl tab when iframe has focus  YES 3  alt tab when parent page has focus  YES 4  alt tab when iframe has focus  NO  lt -- bummer   When the iframe has focus  your blur focus events don t get invoked at all  and the page Visibility API won t trigger on alt tab   I built upon  AndyE s solution and implemented this  almost good  solution here  https   dl dropboxusercontent com u 2683925 estante-components visibility test1 html  sorry  I had some trouble with JSFiddle    This is also available on Github  https   github com qmagico estante-components  This works on chrome chromium  It kind works on firefox  except that it doesn t load the iframe contents  any idea why    Anyway  to resolve the last problem  4   the only way you can do that is to listen for blur focus events on the iframe  If you have some control over the iframes  you can use the postMessage API to do that   https   dl dropboxusercontent com u 2683925 estante-components visibility test2 html  I still haven t tested this with enough browsers  If you can find more info about where this doesn t work  please let me know in the comments below

User · Answer

For angular js  here is a directive  based on the accepted answer  that will allow your controller to react to a change in visibility   myApp directive  reactOnWindowFocus   function  parse        return           restrict   A           link  function scope  element  attrs                var hidden    hidden               var currentlyVisible   true              var functionOrExpression    parse attrs reactOnWindowFocus                 Standards            if  hidden in document              document addEventListener  visibilitychange   onchange             else if   hidden    mozHidden   in document              document addEventListener  mozvisibilitychange   onchange             else if   hidden    webkitHidden   in document              document addEventListener  webkitvisibilitychange   onchange             else if   hidden    msHidden   in document              document addEventListener  msvisibilitychange   onchange             else if   onfocusin  in document                       IE 9 and lower              document onfocusin   onshow                  document onfocusout   onhide              else                      All others              window onpageshow   window onfocus   onshow                  window onpagehide   window onblur   onhide                           function onchange  evt                      occurs both on leaving and on returning                 currentlyVisible    currentlyVisible                  doSomethingIfAppropriate                             function onshow evt                      for older browsers                 currentlyVisible   true                  doSomethingIfAppropriate                               function onhide evt                      for older browsers                 currentlyVisible   false                  doSomethingIfAppropriate                               function doSomethingIfAppropriate                     if  currentlyVisible                          trigger angular digest cycle in this scope                     scope  apply function                             functionOrExpression scope                                                                                   You can use it like this example   lt div react-on-window-focus  refresh    gt   where refresh   is a scope function in the scope of whatever Controller is in scope

User · Answer

If you want to act on whole browser blur  As I commented  if browser lose focus none of the suggested events fire  My idea is to count up in a loop and reset the counter if an event fire  If the counter reach a limit I do a location href to an other page  This also fire if you work on dev-tools     var iput document getElementById  hiddenInput        count 1      function check             count             if count 2   0              iput focus                        else             iput blur                        iput value count             if count gt 3              location href  http   Nirwana com                                     setTimeout function   check    1000        iput onblur function   count 1  iput onfocus function   count 1  check      This is a draft successful tested on FF

User · Answer

The Chromium team is currently developing the Idle Detection API  It is available as an origin trial since Chrome 88  which is already the 2nd origin trial for this feature  An earlier origin trial went from Chrome 84 through Chrome 86  It can also be enabled via a flag   Enabling via chrome   flags To experiment with the Idle Detection API locally  without an origin trial token  enable the  enable-experimental-web-platform-features flag in chrome   flags   A demo can be found here   https   idle-detection glitch me   It has to be noted though that this API is permission-based  as it should be  otherwise this could be misused to monitor a user s behaviour

User · Answer

In HTML 5 you could also use    onpageshow  Script to be run when the window becomes visible onpagehide  Script to be run when the window is hidden   See    https   developer mozilla org en-US docs Web Events pageshow https   developer mozilla org en-US docs Web Events pagehide

User · Answer

u can use     function           var requiredResolution   10     ms     var checkInterval   1000     ms     var tolerance   20     percent       var counter   0      var expected   checkInterval   requiredResolution        console log  expected    expected        window setInterval function              counter           requiredResolution        window setInterval function              var deviation   100   Math abs 1 - counter   expected              console log  is    counter    off by   deviation                  if  deviation  gt  tolerance                console warn  Timer resolution not sufficient                       counter   0         checkInterval

User · Answer

I create a Comet Chat for my app  and when I receive a message from another user I use   if new message       if  document hasFocus             audio play            document title  Have new messages             else          audio stop            document title  Application Name

User · Answer

I would use jQuery because then all you have to do is this     window  blur function        your code here       window  focus function        your code       Or at least it worked for me

User · Answer

I started off using the community wiki answer  but realised that it wasn t detecting alt-tab events in Chrome  This is because it uses the first available event source  and in this case it s the page visibility API  which in Chrome seems to not track alt-tabbing   I decided to modify the script a bit to keep track of all possible events for page focus changes  Here s a function you can drop in   function onVisibilityChange callback        var visible   true       if   callback            throw new Error  no callback given               function focused             if   visible                callback visible   true                        function unfocused             if  visible                callback visible   false                           Standards      if   hidden  in document            document addEventListener  visibilitychange               function     document hidden   unfocused   focused                 if   mozHidden  in document            document addEventListener  mozvisibilitychange               function     document mozHidden   unfocused   focused                 if   webkitHidden  in document            document addEventListener  webkitvisibilitychange               function     document webkitHidden   unfocused   focused                 if   msHidden  in document            document addEventListener  msvisibilitychange               function     document msHidden   unfocused   focused                    IE 9 and lower      if   onfocusin  in document            document onfocusin   focused          document onfocusout   unfocused               All others      window onpageshow   window onfocus   focused      window onpagehide   window onblur   unfocused       Use it like this   onVisibilityChange function visible        console log  the page is now   visible    focused     unfocused          This version listens for all the different visibility events and fires a callback if any of them causes a change  The focused and unfocused handlers make sure that the callback isn t called multiple times if multiple APIs catch the same visibility change

User · Answer

There are 3 typical methods used to determine if the user can see the HTML page  however none of them work perfectly    The W3C Page Visibility API is supposed to do this  supported since  Firefox 10  MSIE 10  Chrome 13   However  this API only raises events when the browser tab is fully overriden  e g  when the user changes from one tab to another one   The API does not raise events when the visibility cannot be determined with 100  accuracy  e g  Alt Tab to switch to another application   Using focus blur based methods gives you a lot of false positive  For example  if the user displays a smaller window on top of the browser window  the browser window will lose the focus  onblur raised  but the user is still able to see it  so it still need to be refreshed   See also http   javascript info tutorial focus Relying on user activity  mouse move  clicks  key typed  gives you a lot of false positive too  Think about the same case as above  or a user watching a video    In order to improve the imperfect behaviors described above  I use a combination of the 3 methods  W3C Visibility API  then focus blur and user activity methods in order to reduce the false positive rate  This allows to manage the following events    Changing browser tab to another one  100  accuracy  thanks to the W3C Page Visibility API  Page potentially hidden by another window  e g  due to Alt Tab  probabilistic   not 100  accurate  User attention potentially not focused on the HTML page  probabilistic   not 100  accurate    This is how it works  when the document lose the focus  the user activity  such as mouse move  on the document is monitored in order to determine if the window is visible or not  The page visibility probability is inversely proportional to the time of the last user activity on the page  if the user makes no activity on the document for a long time  the page is most probably not visible  The code below mimics the W3C Page Visibility API  it behaves the same way but has a small false positive rate  It has the advantage to be multibrowser  tested on Firefox 5  Firefox 10  MSIE 9  MSIE 7  Safari 5  Chrome 9           lt div id  x   lt  div        lt script              Registers the handler to the event for the given object       param obj the object which will raise the event      param evType the event type  click  keypress  mouseover           param fn the event handler function      param isCapturing set the event mode  true   capturing event  false   bubbling event       return true if the event handler has been attached correctly            function addEvent obj  evType  fn  isCapturing         if  isCapturing  null  isCapturing false         if  obj addEventListener              Firefox         obj addEventListener evType  fn  isCapturing           return true          else if  obj attachEvent              MSIE         var r   obj attachEvent  on  evType  fn           return r          else           return false                        register to the potential page visibility change     addEvent document   potentialvisilitychange   function event          document getElementById  x   innerHTML   potentialVisilityChange  potentialHidden   document potentialHidden    document potentiallyHiddenSince   document potentiallyHiddenSince   s lt br                    register to the W3C Page Visibility API     var hidden null      var visibilityChange null      if  typeof document mozHidden      undefined           hidden  mozHidden         visibilityChange  mozvisibilitychange         else if  typeof document msHidden      undefined           hidden  msHidden         visibilityChange  msvisibilitychange         else if  typeof document webkitHidden    undefined           hidden  webkitHidden         visibilityChange  webkitvisibilitychange         else if  typeof document hidden     hidden           hidden  hidden         visibilityChange  visibilitychange             if  hidden  null    visibilityChange  null          addEvent document  visibilityChange  function event            document getElementById  x   innerHTML  visibilityChange      hidden     document hidden    lt br                          var potentialPageVisibility           pageVisibilityChangeThreshold 3 3600     in seconds       init function             function setAsNotHidden               var dispatchEventRequired document potentialHidden            document potentialHidden false            document potentiallyHiddenSince 0            if  dispatchEventRequired  dispatchPageVisibilityChangeEvent                       function initPotentiallyHiddenDetection               if   hasFocusLocal                   the window does not has the focus    check for  user activity in the window             lastActionDate new Date                if  timeoutHandler  null                  clearTimeout timeoutHandler                             timeoutHandler   setTimeout checkPageVisibility  potentialPageVisibility pageVisibilityChangeThreshold 1000 100       100 ms to avoid rounding issues under Firefox                                function dispatchPageVisibilityChangeEvent               unifiedVisilityChangeEventDispatchAllowed false            var evt   document createEvent  Event              evt initEvent  potentialvisilitychange   true  true             document dispatchEvent evt                      function checkPageVisibility               var potentialHiddenDuration  hasFocusLocal    lastActionDate  null 0 Math floor  new Date   getTime  -lastActionDate getTime    1000                                            document potentiallyHiddenSince potentialHiddenDuration            if  potentialHiddenDuration  potentialPageVisibility pageVisibilityChangeThreshold     document potentialHidden                   page visibility change threshold raiched    raise the even             document potentialHidden true              dispatchPageVisibilityChangeEvent                                   var lastActionDate null          var hasFocusLocal true          var hasMouseOver true          document potentialHidden false          document potentiallyHiddenSince 0          var timeoutHandler   null           addEvent document   pageshow   function event              document getElementById  x   innerHTML   pageshow doc  lt br                        addEvent document   pagehide   function event              document getElementById  x   innerHTML   pagehide doc  lt br                        addEvent window   pageshow   function event              document getElementById  x   innerHTML   pageshow win  lt br       raised when the page first shows                     addEvent window   pagehide   function event              document getElementById  x   innerHTML   pagehide win  lt br       not raised                     addEvent document   mousemove   function event              lastActionDate new Date                        addEvent document   mouseover   function event              hasMouseOver true            setAsNotHidden                        addEvent document   mouseout   function event              hasMouseOver false            initPotentiallyHiddenDetection                        addEvent window   blur   function event              hasFocusLocal false            initPotentiallyHiddenDetection                        addEvent window   focus   function event              hasFocusLocal true            setAsNotHidden                        setAsNotHidden                       potentialPageVisibility pageVisibilityChangeThreshold 4     4 seconds for testing     potentialPageVisibility init         lt  script     Since there is currently no working cross-browser solution without false positive  you should better think twice about disabling periodical activity on your web site

User · Answer

var visibilityChange    function  window        var inView   false      return function  fn            window onfocus   window onblur   window onpageshow   window onpagehide   function  e                if   focus 1  pageshow 1  e type                     if  inView  return                  fn  visible                    inView   true                else if  inView                    fn  hidden                    inView   false                                    this     visibilityChange function  state        console log state         http   jsfiddle net ARTsinn JTxQY

User · Answer

This is an adaptation of the answer from Andy E   This will do a task e g  refresh the page every 30 seconds  but only if the page is visible and focused   If visibility can t be detected  then only focus will be used   If the user focuses the page  then it will update immediately  The page won t update again until 30 seconds after any ajax call  var windowFocused   true  var timeOut2   null     function        ajaxSetup        cache  false             content   ajaxComplete function event request  settings          set refresh page       ajax call has just been made  so page doesn t need updating again for 30 seconds             check visibility and focus of window  so as not to keep updating unnecessarily    function           var hidden  change  vis                   hidden   visibilitychange                 mozHidden   mozvisibilitychange                 webkitHidden   webkitvisibilitychange                 msHidden   msvisibilitychange                 oHidden   ovisibilitychange     not currently supported                       for  hidden in vis              if  vis hasOwnProperty hidden   amp  amp  hidden in document                  change   vis hidden                 break                            document body className  visible         if  change          this will check the tab visibility instead of window focus           document addEventListener change  onchange false                  if navigator appName     Microsoft Internet Explorer            window onfocus   document onfocusin   document onfocusout   onchangeFocus       else          window onfocus   window onblur   onchangeFocus         function onchangeFocus evt           evt   evt    window event          if  evt type     focus     evt type     focusin              windowFocused true                     else if  evt type     blur     evt type     focusout              windowFocused false                    if  evt type     focus              update page        only update using window onfocus  because document onfocusin can trigger on every click                           function onchange              document body className   this hidden     hidden     visible           update page                   function update page            if windowFocused amp  amp  document body className   visible               set refresh page 1000                                 set refresh page        function get date time string      var d   new Date      var dT         dT push d getDate       dT push d getMonth      dT push d getFullYear       dT push d getHours       dT push d getMinutes       dT push d getSeconds       dT push d getMilliseconds       return dT join          function do refresh page        do tasks here     e g  some ajax call to update part of the page       date time parameter will probably force the server not to cache             ajax             type   POST             url   someUrl php             data   t     get date time string     amp task update             success  function html                   content   html html                               function set refresh page interval     interval   typeof interval      undefined    interval   30000     default time   30 seconds   if timeOut2    null  clearTimeout timeOut2     timeOut2   setTimeout function        if  document body className   visible   amp  amp windowFocused         do refresh page              set refresh page         interval

User · Answer

For a solution without jQuery check out Visibility js which provides information about three page states  visible        page is visible hidden         page is not visible prerender      page is being prerendered by the browser   and also convenience-wrappers for setInterval     Perform action every second if visible    Visibility every 1000  function          action            Perform action every second if visible  every 60 sec if not visible    Visibility every 1000  60 1000  function          action          A fallback for older browsers  IE  lt  10  iOS  lt  7  is also available

User · Answer

A slightly more complicated way would be to use setInterval   to check mouse position and compare to last check  If the mouse hasn t moved in a set amount of time  the user is probably idle   This has the added advantage of telling if the user is idle  instead of just checking if the window is not active   As many people have pointed out  this is not always a good way to check whether the user or browser window is idle  as the user might not even be using the mouse or is watching a video  or similar  I am just suggesting one possible way to check for idle-ness

User · Answer

Using   Page Visibility API  document addEventListener   visibilitychange    function         if  document hidden            console log  bye          else           console log  well back             false      Can i use   http   caniuse com  feat pagevisibility

User · Answer

this works for me on chrome 67  firefox 67   if  document hasFocus             do stuff

User · Answer

Since originally writing this answer  a new specification has reached recommendation status thanks to the W3C  The Page Visibility API  on MDN  now allows us to more accurately detect when a page is hidden to the user   document addEventListener  visibilitychange   onchange     Current browser support    Chrome 13  Internet Explorer 10  Firefox 10  Opera 12 10   read notes    The following code falls back to the less reliable blur focus method in incompatible browsers    function       var hidden    hidden         Standards    if  hidden in document      document addEventListener  visibilitychange   onchange     else if   hidden    mozHidden   in document      document addEventListener  mozvisibilitychange   onchange     else if   hidden    webkitHidden   in document      document addEventListener  webkitvisibilitychange   onchange     else if   hidden    msHidden   in document      document addEventListener  msvisibilitychange   onchange        IE 9 and lower    else if   onfocusin  in document      document onfocusin   document onfocusout   onchange       All others    else     window onpageshow   window onpagehide       window onfocus   window onblur   onchange     function onchange  evt        var v    visible   h    hidden           evtMap               focus v  focusin v  pageshow v  blur h  focusout h  pagehide h                 evt   evt    window event      if  evt type in evtMap        document body className   evtMap evt type       else       document body className   this hidden     hidden     visible             set the initial state  but only if browser supports the Page Visibility API    if  document hidden      undefined       onchange  type  document hidden     blur     focus             onfocusin and onfocusout are required for IE 9 and lower  while all others make use of onfocus and onblur  except for iOS  which uses onpageshow and onpagehide

User · Answer

There is a neat library available on GitHub   https   github com serkanyersen ifvisible js  Example      If page is visible right now if  ifvisible now           Display pop-up   openPopUp        I ve tested version 1 0 1 on all browsers I have and can confirm that it works with    IE9  IE10 FF 26 0 Chrome 34 0       and probably all newer versions   Doesn t fully work with    IE8 - always indicate that tab window is currently active   now   always returns true for me

[javascript] Is there a way to detect if a browser window is not currently active?

Examples related to javascript

Examples related to browser

Examples related to focus

Examples related to window