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

80

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

javascript jquery events

— 竿
source

另请参见stackoverflow.com/questions/483741/…，它也可以回答此问题。

— 亚历山大·伯德

15

Try document.hasFocus()，它返回一个布尔值。它内置在规范中，因此无需jQuery就可以完成。

— Braden Best，

有人谁需要检查网页的可见性（这是不作为一样焦点），请结帐页面可见性API的更多细节。

— tsh

79

我尚未在其他浏览器中对此进行过测试，但似乎可以在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);
});

— 用户名
source

@jball-必须是IE吗？在Webkit和Firefox中，窗口的任何激活都会触发焦点。我想知道IE是否有解决方法。另外，您是否在网页上进行过测试？也许有问题，因为jsFiddle使用框架？

— user113716 2010年

铬实际上。经过进一步测试后，我的第一个评论可能是错误的-打破它的Tab键似乎更加一致。

— jball

@jball-我猜想tab键会破坏它，因为jsFiddle在其他框架中有很多输入元素。摆脱掉框架，我敢打赌，它对您会更好一些。

— user113716

我相信每个框架都有其自己的window对象，因此，如果要使用框架，则可能只需要在每个框架中包含脚本即可。

— user113716 2010年

4

使用window.top检查顶层窗口。

— 貂Wikström

160

使用文档的hasFocus方法。您可以在此处找到详细的描述和示例： hasFocus方法

编辑：添加小提琴 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);

— 口香糖
source

3

我从上面的链接尝试了该示例，它在IE7 +，Chrome和FF4中运行良好。为您+1。

— 约瑟夫·拉斯特

1

很棒的小功能，比我遇到的其他jQuery等效项要好得多。

— 希思

3

比接受的答案更有用，当窗口未聚焦时，我在计时器加载方面遇到了问题。

— 科科斯

Opera不支持此功能。令人平静的事实是，他们正在将渲染引擎切换到Webkit ：）

— Nikola Petkanski 2013年

6

同时，您可以使用类似的方法来获得Opera中的功能：

if(typeof document.hasFocus === 'undefined') { 	document.hasFocus = function () { 		return document.visibilityState == 'visible'; 	}	 }

— Kent

3

简单的JavaScript代码段

基于事件：

function focuschange(fclass) {
    var elems=['textOut','textFocus'];
    for (var i=0;i<elems.length;i++) {
        document.getElementById(elems[i]).
            setAttribute('class',fclass);
    }
}
window.addEventListener("blur",function(){focuschange('havnt')});
window.addEventListener("focus",function(){focuschange('have')});
focuschange('havnt');

.have                { background:#CFC; }
#textOut.have:after  { content:'';      }
.havnt               { background:#FCC; }
#textOut.havnt:after { content:' not';  }

<span id='textOut'>Have</span><span id='textFocus'> focus</span>

展开摘要

基于间隔池：

setInterval(function() {
    var fclass='havnt';
    if (document.hasFocus()) {
      fclass='have';
    };
    var elems=['textOut','textFocus'];
    for (var i=0;i<elems.length;i++) {
        document.getElementById(elems[i]).
            setAttribute('class',fclass);
    }
},100);

#textOut.have:after  { content:'';     }
#textOut.havnt:after { content:' not'; }
.have  { background:#CFC; }
.havnt { background:#FCC; }

<span id='textOut'>Have</span><span id='textFocus'> focus</span>

展开摘要

— 豪里
source

我喜欢这个答案，因为基于事件的解决方案。恕我直言，这应该始终是首选方式。

— 准

1

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

测试

更新：

我会修复它，但是IE不能很好地工作

测试更新

— 安德烈斯·德斯卡佐
source

切换选项卡时，显然不会触发模糊。:(

— Jethro Larson