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

JavaScript / jQuery: Test if window has focus

提问人:Rod 提问时间:8/14/2010 最后编辑:Wayne KoortsRod 更新时间:10/16/2018 访问量:95226

问:

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

JavaScript jQuery 事件

评论

0赞 Alexander Bird 6/29/2011
另请参阅 stackoverflow.com/questions/483741/...,它也可以回答这个问题。
15赞 Braden Best 2/5/2013
try ,这将返回一个布尔值。它内置在规范中,因此可以在没有jQuery的情况下完成。document.hasFocus()
0赞 tsh 4/19/2018
对于想要检查页面可见性(与焦点不同)的人,请查看页面可见性 API 了解更多详情。

答:

79赞 user113716 8/14/2010 #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);
});​

评论

0赞 user113716 8/14/2010
@jball - 必须是IE格式吗?在 Webkit 和 Firefox 中,任何窗口的激活都会触发焦点。我想知道IE是否有解决方法。另外,您是否在页面上进行了测试?也许有问题,因为 jsFiddle 使用框架?
0赞 jball 8/14/2010
实际上是铬。经过进一步测试,我的第一条评论可能是错误的 - 打破它的 Tab 键似乎更一致。
0赞 user113716 8/14/2010
@jball - 我猜 tab 键会破坏它,因为 jsFiddle 在其他帧中有很多输入元素。去掉框架,我敢打赌它会为你工作得更好一些。
0赞 user113716 8/14/2010
我相信每个帧都有自己的对象,所以如果你要使用帧,你可能只需要在每个帧中包含脚本。window
4赞 Mårten Wikström 6/17/2011
用于检查最上面的窗口。window.top
163赞 gumape 8/14/2010 #2

使用文档的 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);

评论

3赞 Joseph Lust 5/3/2011
我尝试了上面链接中的示例,它在 IE7+、Chrome 和 FF4 中运行良好。+1 给你。
1赞 Heath 9/1/2011
很棒的小函数,比我遇到的其他jQuery等效物要好得多。
3赞 Kokos 10/17/2011
比公认的答案更有用的是,当窗口失焦时,我的计时器加载出现了问题。
0赞 Nikola Petkanski 2/25/2013
Opera 不支持此功能。令人平静的事实是,他们正在将渲染引擎切换到 Webkit :)
6赞 Kent 4/2/2013
同时,您可以使用这样的东西来获取 Opera 中的功能:if(typeof document.hasFocus === 'undefined') { document.hasFocus = function () { return document.visibilityState == 'visible'; } }
1赞 andres descalzo 8/14/2010 #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);
});​

测试

更新:

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

测试更新

评论

0赞 Jethro Larson 11/13/2013
显然,切换选项卡时不会触发模糊。:(
3赞 F. Hauri - Give Up GitHub 10/16/2018 #4

简单的 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>

评论

0赞 quasi 9/12/2020
我喜欢这个答案,因为基于事件的解决方案。恕我直言,这应该是首选的方式。