Есть ли способ обнаружить, если окно браузера не активно в данный момент?

У меня есть JavaScript, который делает деятельность периодически. Когда пользователь не смотрит на сайт (то есть окно или вкладка не имеют фокуса), было бы неплохо не запускаться.

Есть ли способ сделать это с помощью JavaScript?

Мой ориентир: Gmail Chat воспроизводит звук, если окно, которое вы используете, не активно.

С момента написания этого ответа новая спецификация достигла статуса рекомендации благодаря W3C. Page Visibility API (на MDN ) теперь позволяет нам более точно определить , когда страница скрыта от пользователя.

document.addEventListener("visibilitychange", onchange);

Текущая поддержка браузера:

• Chrome 13+
• Internet Explorer 10+
• Firefox 10+
• Opera 12.10+ ^{[ читать заметки ]}

Следующий код возвращается к менее надежному методу размытия / фокусировки в несовместимых браузерах:

(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и onfocusoutкоторые необходимы для IE 9 и нижней части , в то время как все другие используют onfocusи onblurдля IOS, которая использует кроме onpageshowи onpagehide.

Я бы использовал jQuery, потому что тогда все, что вам нужно сделать, это:

$(window).blur(function(){
  //your code here
});
$(window).focus(function(){
  //your code
});

Или, по крайней мере, это сработало для меня.

Есть 3 типичных метода, используемых, чтобы определить, может ли пользователь видеть страницу HTML, однако ни один из них не работает идеально:

• W3C Page Visibility API должен делать это (поддерживается начиная с: Firefox 10, MSIE 10, Chrome 13). Однако этот API вызывает события только тогда, когда вкладка браузера полностью переопределена (например, когда пользователь переключается с одной вкладки на другую). API не вызывает события, когда видимость не может быть определена со 100% точностью (например, Alt + Tab для переключения на другое приложение).

• Использование методов фокусировки / размытия дает много ложных срабатываний. Например, если пользователь отображает меньшее окно в верхней части окна браузера, окно браузера теряет фокус ( onblurподнятый), но пользователь все еще может его видеть (поэтому его все равно необходимо обновить). Смотрите также http://javascript.info/tutorial/focus

• Полагаясь на активность пользователя (движение мыши, щелчки, ввод ключа), вы также получаете много ложных срабатываний. Подумайте о том же случае, что и выше, или о пользователе, просматривающем видео.

Чтобы улучшить несовершенное поведение, описанное выше, я использую комбинацию из 3 методов: W3C Visibility API, затем методы фокусировки / размытия и пользовательской активности, чтобы уменьшить вероятность ложных срабатываний. Это позволяет управлять следующими событиями:

• Замена вкладки браузера на другую (точность 100%, благодаря API видимости страницы W3C)
• Страница потенциально скрыта другим окном, например, из-за Alt + Tab (вероятностный = не на 100% точный)
• Внимание пользователя потенциально не сфокусировано на HTML-странице (вероятностный = не точный на 100%)

Вот как это работает: когда документ теряет фокус, пользовательская активность (например, перемещение мыши) в документе отслеживается, чтобы определить, является ли окно видимым или нет. Вероятность видимости страницы обратно пропорциональна времени последнего пользовательского действия на странице: если пользователь долгое время не выполняет никаких действий с документом, скорее всего, страница не видна. Приведенный ниже код имитирует API видимости страницы W3C: он ведет себя так же, но имеет небольшой процент ложных срабатываний. Он имеет преимущество быть мультибраузером (протестировано на Firefox 5, Firefox 10, MSIE 9, MSIE 7, Safari 5, Chrome 9).

    <div id = "x"> </ div>

    <Скрипт>
    / **
    Регистрирует обработчик для события для данного объекта.
    @param obj объект, который будет вызывать событие
    @param evType тип события: щелчок, нажатие клавиши, наведение мыши, ...
    @param fn функция обработчика событий
    @param isCapturing установить режим события (true = событие захвата, false = событие всплытия)
    @return true, если обработчик событий был правильно подключен
    * /
    function addEvent (obj, evType, fn, isCapturing) {
      if (isCapturing == null) isCapturing = false; 
      if (obj.addEventListener) {
        // Fire Fox
        obj.addEventListener (evType, fn, isCapturing);
        вернуть истину;
      } else if (obj.attachEvent) {
        // MSIE
        var r = obj.attachEvent ('on' + evType, fn);
        возврат г;
      } еще {
        вернуть ложь;
      }
    }

    // зарегистрироваться на потенциальное изменение видимости страницы
    addEvent (документ, "потенциальная возможность изменения", функция (событие) {
      document.getElementById ("x"). innerHTML + = "потенциалVisilityChange: потенциалHidden =" + document.potentialHidden + ", document.potentiallyHiddenSince =" + document.potentiallyHiddenSince + "s <br>";
    });

    // зарегистрироваться в API видимости страницы W3C
    var hidden = null;
    var visibilityChange = null;
    if (typeof document.mozHidden! == "undefined") {
      скрытый = "mozHidden";
      visibilityChange = "mozvisibilitychange";
    } else if (typeof document.msHidden! == "undefined") {
      скрытый = "msHidden";
      visibilityChange = "msvisibilitychange";
    } else if (typeof document.webkitHidden! == "undefined") {
      скрытый = "webkitHidden";
      visibilityChange = "webkitvisibilitychange";
    } else if (typeof document.hidden! == "hidden") {
      скрытый = «скрытый»;
      visibilityChange = "visibilitychange";
    }
    if (hidden! = null && visibilityChange! = null) {
      addEvent (document, visibilityChange, function (event) {
        document.getElementById ("x"). innerHTML + = visibilityChange + ":" + hidden + "=" + document [hidden] + "<br>";
      });
    }


    var потенциальноPageVisibility = {
      pageVisibilityChangeThreshold: 3 * 3600, // в секундах
      init: function () {
        function setAsNotHidden () {
          var dispatchEventRequired = document.potentialHidden;
          document.potentialHidden = FALSE;
          document.potentiallyHiddenSince = 0;
          if (dispatchEventRequired) dispatchPageVisibilityChangeEvent ();
        }

        function initPotentiallyHiddenDetection () {
          if (! hasFocusLocal) {
            // окно не имеет фокуса => проверка активности пользователя в окне
            lastActionDate = new Date ();
            if (timeoutHandler! = null) {
              clearTimeout (timeoutHandler);
            }
            timeoutHandler = setTimeout (checkPageVisibility, потенциальноPageVisibility.pageVisibilityChangeThreshold * 1000 + 100); // +100 мс, чтобы избежать проблем с округлением в Firefox
          }
        }

        function dispatchPageVisibilityChangeEvent () {
          unifiedVisilityChangeEventDispatchAllowed = FALSE;
          var evt = document.createEvent ("Event");
          evt.initEvent («потенциальная возможность изменения», правда, правда);
          document.dispatchEvent (EVT);
        }

        function checkPageVisibility () {
          var потенциальноHiddenDuration = (hasFocusLocal || lastActionDate == null? 0: Math.floor ((new Date (). getTime () - lastActionDate.getTime ()) / 1000));
                                        document.potentiallyHiddenSince = potentialHiddenDuration;
          if (потенциалHiddenDuration> = потенциалPageVisibility.pageVisibilityChangeThreshold &&! document.potentialHidden) {
            // порог изменения видимости страницы raiched => повысить четность
            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 ( "х") innerHTML + = "pageshow / док: <br>".
        });
        addEvent (document, "pagehide", function (event) {
          document.getElementById ( "х") innerHTML + = "pagehide / док: <br>".
        });
        addEvent (окно, "pagehow", функция (событие) {
          document.getElementById ( "х") innerHTML + = "pageshow / выиграть: <br>". // поднял, когда страница впервые показывает
        });
        addEvent (окно, "pagehide", функция (событие) {
          document.getElementById ( "х") innerHTML + = "pagehide / выиграть: <br>". // не поднят
        });
        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 (окно, «размытие», функция (событие) {
          hasFocusLocal = FALSE;
          initPotentiallyHiddenDetection ();
        });
        addEvent (окно, «фокус», функция (событие) {
          hasFocusLocal = TRUE;
          setAsNotHidden ();
        });
        setAsNotHidden ();
      }
    }

    potentialPageVisibility.pageVisibilityChangeThreshold = 4; // 4 секунды для тестирования
    potentialPageVisibility.init ();
    </ Скрипт>

Поскольку в настоящее время не существует работающего кросс-браузерного решения без ложных срабатываний, вам следует подумать дважды об отключении периодической активности на вашем веб-сайте.

На GitHub есть аккуратная библиотека:

https://github.com/serkanyersen/ifvisible.js

Пример:

// If page is visible right now
if( ifvisible.now() ){
  // Display pop-up
  openPopUp();
}

Я протестировал версию 1.0.1 на всех моих браузерах и могу подтвердить, что она работает с:

• IE9, IE10
• FF 26.0
• Chrome 34.0

... и, вероятно, все более новые версии.

Не полностью работает с:

• IE8 - всегда указывать, что вкладка / окно в данный момент активна ( .now()всегда возвращается trueдля меня)

Использование: API видимости страницы

document.addEventListener( 'visibilitychange' , function() {
    if (document.hidden) {
        console.log('bye');
    } else {
        console.log('well back');
    }
}, false );

Могу ли я использовать ? http://caniuse.com/#feat=pagevisibility

Я создаю чат Comet для своего приложения, и когда я получаю сообщение от другого пользователя, я использую:

if(new_message){
    if(!document.hasFocus()){
        audio.play();
        document.title="Have new messages";
    }
    else{
        audio.stop();
        document.title="Application Name";
    } 
}

Я начал с использования вики-ответа сообщества, но понял, что он не обнаруживает события alt-tab в Chrome. Это потому, что он использует первый доступный источник событий, и в данном случае это API видимости страницы, который в Chrome, похоже, не отслеживает alt-tabbing.

Я решил немного изменить сценарий, чтобы отслеживать все возможные события для изменения фокуса страницы. Вот функция, которую вы можете добавить:

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;
};

Используйте это так:

onVisibilityChange(function(visible) {
    console.log('the page is now', visible ? 'focused' : 'unfocused');
});

Эта версия прослушивает все различные события видимости и запускает обратный вызов, если любое из них вызывает изменение. focusedИ unfocusedобработчики убедитесь , что обратного вызова не вызывается несколько раз , если несколько API , поймать такое же изменение видимости.

Это действительно сложно. Похоже, не существует решения с учетом следующих требований.

• Страница содержит фреймы, которые вы не можете контролировать
• Вы хотите отслеживать изменение состояния видимости независимо от того, было ли изменение вызвано изменением TAB (Ctrl + Tab) или изменением окна (Alt + Tab)

Это происходит потому, что:

• API видимости страницы может надежно сообщить вам об изменении вкладки (даже с помощью iframes), но не может сообщить вам, когда пользователь меняет окна.
• Прослушивание событий размытия / фокуса окна может обнаружить alt + tabs и ctrl + tabs, если у iframe нет фокуса.

Учитывая эти ограничения, можно реализовать решение, которое объединяет - API видимости страницы - размытие окна / focus - document.activeElement

Это способно:

• 1) Ctrl + Tab, когда родительская страница имеет фокус: ДА
• 2) Ctrl + Tab, когда iframe имеет фокус: ДА
• 3) alt + tab, когда родительская страница имеет фокус: ДА
• 4) alt + tab, когда iframe имеет фокус: NO <- облом

Когда в фрейме есть фокус, ваши события размытия / фокуса вообще не вызываются, и API видимости страницы не будет срабатывать при нажатии клавиши alt + tab.

Я основывался на решении @ AndyE и реализовал это (почти хорошее) решение здесь: https://dl.dropboxusercontent.com/u/2683925/estante-components/visibility_test1.html (извините, у меня возникли некоторые проблемы с JSFiddle).

Это также доступно на Github: https://github.com/qmagico/estante-components

Это работает на хром / хром. Это работает на firefox, за исключением того, что он не загружает содержимое iframe (есть идеи почему?)

В любом случае, чтобы решить последнюю проблему (4), единственный способ сделать это - прослушать события размытия / фокуса в iframe. Если у вас есть некоторый контроль над iframes, вы можете использовать для этого API postMessage.

https://dl.dropboxusercontent.com/u/2683925/estante-components/visibility_test2.html

Я до сих пор не проверил это с достаточным количеством браузеров. Если вы можете найти больше информации о том, где это не работает, пожалуйста, дайте мне знать в комментариях ниже.

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/

это работает для меня на Chrome 67, Firefox 67,

if(!document.hasFocus()) {
    // do stuff
}

вы можете использовать:

(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 > tolerance) {
            console.warn('Timer resolution not sufficient!');
        }
        counter = 0;
    }, checkInterval);

})();

В HTML 5 вы также можете использовать:

• onpageshow: Скрипт запускается, когда окно становится видимым
• onpagehide: Скрипт, запускаемый, когда окно скрыто

Видеть:

• https://developer.mozilla.org/en-US/docs/Web/Events/pageshow
• https://developer.mozilla.org/en-US/docs/Web/Events/pagehide

Это адаптация ответа от Энди Э.

Это выполнит задачу, например, обновит страницу каждые 30 секунд, но только если страница видна и сфокусирована.

Если видимость не может быть обнаружена, то будет использоваться только фокус.

Если пользователь фокусирует страницу, то она сразу обновится

Страница не будет обновляться снова через 30 секунд после любого вызова ajax

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) && 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&&(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()+"&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")&&windowFocused){
      do_refresh_page();
    }
    set_refresh_page();
  }, interval);
}

Для решения без jQuery проверьте Visibility.js, который предоставляет информацию о трех состояниях страницы

visible    ... page is visible
hidden     ... page is not visible
prerender  ... page is being prerendered by the browser

а также удобные обёртки для 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();
});

Также доступен запасной вариант для старых браузеров (IE <10; iOS <7)

Несколько более сложный способ - использовать setInterval()для проверки положения мыши и сравнить с последней проверкой. Если мышь не двигалась в течение заданного времени, пользователь, вероятно, бездействует.

Это дает дополнительное преимущество: он говорит, находится ли пользователь в режиме ожидания, а не просто проверяет, не активировано ли окно.

Как отмечали многие люди, это не всегда хороший способ проверить, простаивает ли окно пользователя или браузера, так как пользователь может даже не использовать мышь или смотреть видео, или что-то подобное. Я просто предлагаю один из возможных способов проверки на безделье.

Для angular.js вот директива (на основе принятого ответа), которая позволит вашему контроллеру реагировать на изменение видимости:

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);
                    });
                }
            }
        }
    };

});

Вы можете использовать его, как в следующем примере:, <div react-on-window-focus="refresh()">где refresh()находится функция области действия в области действия любого Контроллера.

Вот солидное, современное решение. (Короткая сладкая 👌🏽)

document.addEventListener("visibilitychange", () => {
  console.log( document.hasFocus() )
})

Это настроит слушателя на запуск при возникновении любого события видимости, которое может быть фокусом или размытием.

Если вы хотите действовать на размытие всего браузера : как я уже говорил, если браузер теряет фокус, ни одно из предложенных событий не срабатывает. Моя идея состоит в том, чтобы считать в цикле и сбрасывать счетчик в случае возникновения события. Если счетчик достигает предела, я делаю location.href для другой страницы. Это также срабатывает, если вы работаете с 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>3){
           location.href="http://Nirwana.com";
         }              
         setTimeout(function(){check()},1000);
}   
iput.onblur=function(){count=1}
iput.onfocus=function(){count=1}
check();

Это проект, успешно протестированный на FF.