Làm cách nào để phát hiện khi một tab được lấy tiêu điểm hoặc không được đặt tiêu điểm trong Chrome bằng Javascript?

Tôi cần biết người dùng hiện có đang xem một tab hay không trong Google Chrome. Tôi đã cố gắng sử dụng các sự kiện làm mờ và tiêu điểm liên kết với cửa sổ, nhưng chỉ làm mờ dường như hoạt động chính xác.

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

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

Sự kiện tiêu điểm hoạt động kỳ lạ, chỉ đôi khi. Nếu tôi chuyển sang tab khác và quay lại, sự kiện tiêu điểm sẽ không kích hoạt. Nhưng nếu tôi nhấp vào thanh địa chỉ và sau đó quay lại trang, nó sẽ xảy ra. Hoặc nếu tôi chuyển sang một chương trình khác và sau đó quay lại Chrome, nó sẽ kích hoạt nếu tab hiện được lấy tiêu điểm.

Cập nhật năm 2015: Cách thức HTML5 mới với API khả năng hiển thị (lấy từ nhận xét của Blowsie):

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

Mã mà người đăng ban đầu cung cấp (trong câu hỏi) hiện đã hoạt động, kể từ năm 2011:

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

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

chỉnh sửa : Kể từ vài tháng sau trong Chrome 14, điều này sẽ vẫn hoạt động, nhưng người dùng phải tương tác với trang bằng cách nhấp vào bất kỳ đâu trong cửa sổ ít nhất một lần. Chỉ cuộn và như vậy là không đủ để làm cho việc này hoạt động. Việc làm window.focus()này cũng không làm cho việc này tự động hoạt động. Nếu có ai biết về cách giải quyết khác, vui lòng đề cập.

Câu trả lời đã chọn cho câu hỏi Có cách nào để phát hiện xem cửa sổ trình duyệt hiện không hoạt động không? nên làm việc. Nó sử dụng API hiển thị trang do W3C soạn thảo vào ngày 06 tháng 06 năm 2011.

Rốt cuộc thì nó có thể hoạt động, tôi đã tò mò và viết mã này:

...
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>

Mã này thực hiện chính xác những gì bạn muốn, nhưng theo một cách xấu xí. Có điều, Chrome dường như bỏ qua việc thay đổi tiêu đề theo thời gian (khi chuyển sang tab và giữ chuột trong 1 giây dường như luôn tạo ra hiệu ứng này).

Bạn sẽ nhận được các giá trị khác nhau trên màn hình của mình, nhưng tiêu đề của bạn sẽ không thay đổi.

kết luận: Dù bạn đang làm gì, đừng tin tưởng vào kết quả khi kiểm tra nó!

Đối với bất kỳ ai muốn hoán đổi tiêu đề trang khi làm mờ và sau đó quay lại tiêu đề trang ban đầu trên tiêu điểm:

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

Tôi thấy rằng việc thêm các sự kiện onblur = và onfocus = vào nội tuyến đã bỏ qua vấn đề:

Điều này có thể hoạt động với JQuery

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

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

Trong chrome, bạn có thể chạy tập lệnh nền với thời gian chờ dưới 1 giây và khi tab không có tiêu điểm, chrome sẽ chỉ chạy nó mỗi giây. Thí dụ;

Điều này không hoạt động trong Firefox hoặc Opera. Không biết về các trình duyệt khác, nhưng tôi nghi ngờ nó cũng hoạt động ở đó.

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