Wie erkennt man, ob ein Tab in Chrome mit Javascript aktiviert ist oder nicht?

Question

Ich muss wissen, ob der Benutzer gerade einen Tab in Google Chrome anzeigt oder nicht. Ich habe versucht, die Ereignisse zu verwischen und den Fokus auf das Fenster zu fokussieren, aber nur die Unschärfe scheint korrekt zu funktionieren.

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

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

Das Fokusereignis funktioniert seltsam, nur manchmal. Wenn ich zu einer anderen Registerkarte und zurück wechsle, wird das Fokusereignis nicht aktiviert. Aber wenn ich auf die Adressleiste und dann auf die Seite klicke, wird es. Oder wenn ich zu einem anderen Programm und dann zurück zu Chrome wechsle, wird es aktiviert, wenn der Tab gerade fokussiert ist.

Answer 1

2015 Update: Der neue HTML5 Weg mit Sichtbarkeit API (von Blowsie Kommentar genommen):

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

---

Der Code das ursprüngliche Plakat (in der Frage) gibt funktioniert nun, ab 2011 :

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

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

bearbeiten: Ab ein paar Monate später in Chrome 14, das noch funktioniert, aber die Der Benutzer muss mit der Seite interagiert haben, indem er mindestens einmal in das Fenster geklickt hat. Scrollen einfach und so ist nicht genug, um diese Arbeit zu machen. Doing window.focus() macht dies auch nicht automatisch funktionieren. Wenn jemand einen Workaround kennt, bitte erwähnen.

Answer 2

Es könnte schließlich arbeiten, ich wurde neugierig und schrieb diesen 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> 

Dieser Code funktioniert precisly, was Sie wollen, aber auf eine hässliche Art und Weise. Die Sache ist, Chrome scheint den Titelwechsel von Zeit zu Zeit zu ignorieren (wenn man auf den Tab wechselt und die Maus für 1 Sekunde gedrückt hält, scheint dieser Effekt immer zu kreieren).

Sie erhalten unterschiedliche Werte auf Ihrem Bildschirm, aber Ihr Titel ändert sich nicht.

schlussfolgerung: Was auch immer Sie tun, trauen Sie nicht das Ergebnis beim Testen!

Answer 3

Ich fand, dass onblur Hinzufügen = und onfocus = event das Problem umgangen inline:

Answer 4

In Chrom Sie können mit einem Timeout von weniger als 1 Sekunde einen Hintergrund Skript ausführen, und wenn die Registerkarte hat keinen Fokus Chrome wird es nur jede Sekunde ausführen. Beispiel;

Dies funktioniert nicht in Firefox oder Opera. Ich weiß nicht, über andere Browser, aber ich bezweifle, dass es auch dort funktioniert.

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

mit JQuery arbeiten

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

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

Answer 6

Die gewählte Antwort auf die Frage Dies könnte Is there a way to detect if a browser window is not currently active? funktionieren sollte. Es verwendet die Page Visibility API, die vom W3C am 2011-06-02 entworfen wurde.

Answer 7

Für alle, die Seitentitel auf Blur tauschen will und dann auf den ursprünglichen Seitentitel auf Fokus zurück:

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