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