Cách phát hiện khi tab được tập trung hoặc không ở trong Chrome bằng Javascript?

Question

Tôi cần biết liệu 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 mờ và tập trung gắn với cửa sổ, nhưng chỉ mờ có vẻ như đang 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 trọng tâm hoạt động lạ, đôi khi chỉ. Nếu tôi chuyển sang tab khác và quay lại, sự kiện lấy nét sẽ không kích hoạt. Nhưng nếu tôi bấm vào thanh địa chỉ và sau đó trở lại trên trang, nó sẽ. Hoặc nếu tôi chuyển sang một chương trình khác và sau đó quay lại Chrome, chương trình sẽ kích hoạt nếu tab hiện đang được tập trung.

Answer 1

2015 update: HTML5 cách mới với API tầm nhìn (lấy từ bình luận Blowsie của):

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

---

Mã các poster ban đầu đưa ra (trong câu hỏi) hiện đang làm việc, như năm 2011 :

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

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

chỉnh sửa: Kể từ một vài tháng sau đó trong Chrome 14, điều này sẽ vẫn làm việc, 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ỉ đơn giản là di chuyển và như vậy là không đủ để thực hiện công việc này. Làm window.focus() cũng không tự động thực hiện công việc này. Nếu có ai biết về cách giải quyết khác, vui lòng đề cập đến.

Answer 2

Nó có thể làm việc sau khi tất cả, tôi đã nhận 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 không precisly những gì bạn muốn, nhưng trên một cách xấu xí. Vấn đề là, Chrome dường như bỏ qua sự thay đổi tiêu đề theo thời gian (khi chuyển sang tab và giữ chuột xuống trong 1 giây dường như luôn tạo hiệu ứng này).

Bạn sẽ nhận được các giá trị khác nhau trên màn hì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 thử nghiệm!

Answer 3

tôi thấy rằng việc thêm onblur = và onfocus = sự kiện để Inline bỏ qua vấn đề này:

Answer 4

Trong chrome bạn có thể chạy một kịch bản nền với một thời gian chờ ít hơn 1 giây, và khi các 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); 

Answer 5

Điều này có thể làm việc với JQuery

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

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

Answer 6

Câu trả lời được lựa chọn cho câu hỏi Is there a way to detect if a browser window is not currently active? nên làm việc. Nó sử dụng Page Visibility API được soạn thảo bởi W3C vào 2011-06-02.

Answer 7

Đối với bất cứ ai muốn trao đổi tiêu đề trang trên mờ và sau đó quay trở lại tiêu đề trang gốc trên tập trung:

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