Как определить, когда вкладка находится в фокусе или нет в Chrome с Javascript?

Question

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

window.addEventListener('focus', function() {
  document.title = 'focused';
});

window.addEventListener('blur', function() {
  document.title = 'not focused';
});

Событие фокуса работает странно, только иногда. Если я переключусь на другую вкладку и вернусь, событие фокусировки не будет активировано. Но если я нажму на адресную строку, а затем вернусь на страницу, это будет. Или, если я переключусь на другую программу, а затем вернусь в Chrome, она активируется, если вкладка в данный момент сфокусирована.

Answer 1

Обновление 2015: Новый способ HTML5 с API видимости (взят из комментария Блоуси):

document.addEventListener('visibilitychange', function(){
    document.title = document.hidden; // change tab text for demo
})

---

Код, который дает оригинальный плакат (в вопросе), теперь работает, начиная с 2011 года:

window.addEventListener('focus', function() {
    document.title = 'focused';
});

window.addEventListener('blur', function() {
    document.title = 'not focused';
});

edit : по прошествии нескольких месяцев в Chrome 14 это все равно будет работать, но пользователь должен был взаимодействовать со страницей, щелкая в любом месте окна хотя бы один раз. Просто прокрутка и тому подобное, чтобы сделать эту работу. Выполнение window.focus() также не делает эту работу автоматически. Если кто-нибудь знает об обходном пути, пожалуйста, укажите.

Answer 2

Выбранный ответ на вопрос Есть ли способ обнаружить, если окно браузера не активно в данный момент? должно работать. Он использует API видимости страницы , разработанный W3C 2011-06-02.

Answer 3

Для тех, кто хочет поменять заголовки страниц на размытие, а затем вернуться к исходному заголовку страницы в фокусе:

// Swapping page titles on blur
var originalPageTitle = document.title;

window.addEventListener('blur', function(){
    document.title = 'Don\'t forget to read this...';
});

window.addEventListener('focus', function(){
    document.title = originalPageTitle;
});

Answer 4

В конце концов, это может сработать, мне стало любопытно и я написал этот код:

...
setInterval ( updateSize, 500 );
function updateSize(){
  if(window.outerHeight == window.innerHeight){
    document.title = 'not focused';             
  } else {
    document.title = 'focused';
  }

  document.getElementById("arthur").innerHTML = window.outerHeight + " - " + window.innerHeight;
}
...
<div id="arthur">
  dent
</div>

Этот код делает именно то, что вы хотите, но безобразно. Дело в том, что Chrome, похоже, время от времени игнорирует изменение названия (когда переключение на вкладку и удерживание мыши в течение 1 секунды, кажется, всегда создает этот эффект).

Вы получите разные значения на экране, но название не изменится.

вывод: Что бы вы ни делали, не доверяйте результату при тестировании!

Answer 5

Это может работать с JQuery

$(function() {
    $(window).focus(function() {
        console.log('Focus');
    });

    $(window).blur(function() {
        console.log('Blur');
    });
});

Answer 6

В Chrome вы можете запустить фоновый скрипт с тайм-аутом менее 1 секунды, и если на вкладке нет фокуса, Chrome будет запускать его только каждую секунду. Пример;

Это не работает в Firefox или Opera. Не знаю, как работают другие браузеры, но я сомневаюсь, что он там тоже работает.

var currentDate = new Date();
var a = currentDate.getTime();

function test() {
    var currentDate = new Date();
    var b = currentDate.getTime();
var c = b - a;
    if (c > 900) {
        //Tab does not have focus.
    } else {
        //It does
    }
    a = b;
    setTimeout("test()",800);
}



setTimeout("test()",1);

Answer 7

Я обнаружил, что добавление событий onblur = и onfocus = для inline обошло проблему: