How to determine when a tab is concentrated or not in Chrome using Javascript?

Question

I need to know if the user is viewing the tab or not in Google Chrome. I tried using event blur and focus tied to the window, but only the blur seems to work correctly.

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

A focus event works strangely, only occasionally. If I switch to another tab and back, the focus event will not be activated. But if I click on the address bar and then return to the page, this will happen. Or, if I switch to another program and then return to Chrome, it activates if the tab is currently focused.

Answer 1

2015 update: New HTML5 method with visibility API (taken from Blowsie comment):

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

---

The code that the original poster gives (in the question) now works since 2011:

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

edit . After several months in Chrome 14, this will still work, but the user should have interacted with the page by clicking anywhere in the window at least once. Just scrolling and not enough to do the job. Running window.focus() does not do this work automatically. If anyone knows of a workaround, please indicate.

Answer 2

Selected answer to the question. Is there a way to detect that the browser window is currently not active? should work. It uses the page visibility API developed by W3C on 2011-06-02.

Answer 3

In the end, it might work, I was curious and wrote this code:

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

This code does what you want, but on an ugly path. The fact is that Chrome seems to ignore the name change from time to time (when you switch to the tab and hold the mouse for 1 second, it seems that this effect is always created).

Different values ​​will be displayed on the screen, but your title will not change.

Conclusion: No matter what you do, do not trust the results when testing it.

Answer 4

For those who want to change the page names to blur, and then return to the original page title in focus:

 // 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 5

I found that adding onblur = and onfocus = events to inline circumvented the problem:

Answer 6

This can work with jQuery.

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

Answer 7

In chrome, you can run a background script with a timeout of less than 1 second, and when the tab has no focus, chrome will run it every second. Example

This does not work in Firefox or Opera. I don’t know about other browsers, but I doubt that it works there too.

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