JavaScript/jQuery：测试窗口是否有焦点

Question

如何测试浏览器是否有焦点？

Answer 1

我没有在其他浏览器中测试过，但它似乎在Webkit中工作。我会让你试试IE。 ：O）

试试看：http://jsfiddle.net/ScKbk/

后，您即可启动间隔，改变浏览器窗口的焦点，看结果的变化。再次，仅在Webkit中进行测试。

var window_focus; 

$(window).focus(function() { 
    window_focus = true; 
}).blur(function() { 
    window_focus = false; 
}); 

$(document).one('click', function() { 
    setInterval(function() { 
     $('body').append('has focus? ' + window_focus + '<br>'); 
    }, 1000); 
});​ 

Answer 2

使用文件的hasFocus方法。 你可以找到详细的说明和这里的例子： hasFocus method

编辑：新增小提琴 http://jsfiddle.net/Msjyv/3/

HTML

Currently <b id="status">without</b> focus... 

JS

function check() 
{ 
    if(document.hasFocus() == lastFocusStatus) return; 

    lastFocusStatus = !lastFocusStatus; 
    statusEl.innerText = lastFocusStatus ? 'with' : 'without'; 
} 

window.statusEl = document.getElementById('status'); 
window.lastFocusStatus = document.hasFocus(); 

check(); 
setInterval(check, 200); 

Answer 3

HTML：

<button id="clear">clear log</button> 
<div id="event"></div>​ 

的Javascript：

$(function(){ 

    $hasFocus = false; 

    $('#clear').bind('click', function() { $('#event').empty(); }); 

    $(window) 
     .bind('focus', function(ev){ 
      $hasFocus = true; 
      $('#event').append('<div>'+(new Date()).getTime()+' focus</div>'); 
     }) 
     .bind('blur', function(ev){ 
      $hasFocus = false; 
      $('#event').append('<div>'+(new Date()).getTime()+' blur</div>'); 
     }) 
     .trigger('focus'); 

    setInterval(function() { 
     $('#event').append('<div>'+(new Date()).getTime()+' has focus '+($hasFocus ? 'yes' : 'no')+'</div>'); 
    }, 1000); 
});​ 

test

UPDATE：

我会解决它，但IE浏览器不能很好地工作

test update