Як визначити, коли вкладка сфокусована чи ні в Chrome за допомогою Javascript?

Мені потрібно знати, переглядає користувач на даний момент вкладку чи ні в Google Chrome. Я намагався використовувати розмиття подій та фокусування, прив’язане до вікна, але, здається, лише розмиття працює коректно.

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

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

Фокусна подія працює дивно, лише іноді. Якщо я перейду на іншу вкладку і назад, подія фокусу не активується. Але якщо я натисну на адресний рядок, а потім повернуся на сторінку, це буде. Або, якщо я перейду на іншу програму, а потім повернуся до Chrome, вона активується, якщо вкладка в даний момент зосереджена.

Оновлення 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';
});

редагувати : станом на кілька місяців пізніше в Chrome 14, це все одно буде працювати, але користувач повинен взаємодіяти зі сторінкою, принаймні один раз клацнувши в будь-якому місці вікна. Простого прокручування і цього недостатньо, щоб зробити цю роботу. Це window.focus()також не робить цю роботу автоматично. Якщо хтось знає спосіб обходу, будь ласка, згадайте.

Вибрана відповідь на запитання Чи є спосіб визначити, чи вікно браузера наразі не активне? повинні працювати. Він використовує API видимості сторінок, розроблений W3C 02.06.2011.

Зрештою, це може спрацювати, мені стало цікаво і я написав такий код:

...
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 секунди, здається, завжди створюється цей ефект).

Ви отримаєте різні значення на екрані, але ваш заголовок не зміниться.

висновок: Що б ви не робили, не довіряйте результату при його тестуванні!

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

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

Я виявив, що додавання подій onblur = та onfocus = до вбудованого обходить проблему:

Це може працювати з JQuery

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

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

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