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

Question

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

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

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

Answer 1

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

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

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

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

(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,

Answer 2

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

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

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

Answer 3

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

• API видимости страницы W3C должен делать это (поддерживается начиная с: 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).