Как определить, когда вкладка сосредоточена или нет в Chrome с помощью Javascript?

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

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

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

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

Ответы

Ответ 1

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

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() не делает эту работу автоматически. Если кто-нибудь знает об обходном пути, пожалуйста, укажите.

Ответ 3

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

...
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 секунды, кажется, всегда создается этот эффект).

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

вывод: Независимо от того, что вы делаете, не доверяйте результатам при его тестировании.

Ответ 4

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

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

Ответ 5

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

Ответ 6

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

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

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

Ответ 7

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

Это не работает в 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);