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


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

    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.

    评论1

    For those who are not satisfied with the answers below, check out the requestAnimationFrame API, or use the modern feature that the frequency of setTimeout/setInterval is reduced when the window is not visible (1 sec in Chrome, for example).
    – Rob W
    Feb 10 '13 at 17:05
     
     
    评论2
     
    80% of the answers below are not answers to this question. The question asks about not currently active but tons of answer below are about not visible which is not an answer to this question. They should arguably be flagged as "not an answer"
    – gman
    Aug 31 '18 at 7:19
     
     
    回答1

    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.

    评论1

    @AndyE I tried this solution on chromium. It works if I change tabs, but it doesn't if I change windows (ALT+tab). Should it? Here's a fiddle - jsfiddle.net/8a9N6/17 Sep 16 '13 at 21:25
     
    评论2
    @AndyE Your solution seems to only work if the user changes tabs, or minimizes/maximizes the window. However, the onchange event is not triggered if the user leaves the tab active, but maximizes another program over it from the taskbar. Is there a solution for that scenario? Thanks! Nov 4 '14 at 18:43
     

    回答2

    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.

     评论 

    This no longer works for current versions of modern browsers, see the approved answer (Page Visibility API)
    – Jon z
    Feb 25 '14 at 17:10
     
     
     
     
     
     
     
     
  • 相关阅读:
    安装python包的两种方法
    Oracle 查询当前用户下的所有表
    Oracle SQL存储过程结构、异常处理示例
    Oracle IF-ELSE条件判断结构
    Oracle 组函数count()
    从svn下载项目后出现 Error:java: Compilation failed: internaljava compiler error 解决办法
    当学习失去方向,开始荒废时光时
    给自己一个目标
    汇编环境搭建在Linux下
    汇编学习总结
  • 原文地址:https://www.cnblogs.com/chucklu/p/15324748.html
Copyright © 2020-2023  润新知