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

IT技术 javascript jquery events
2021-01-25 23:12:04

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

4个回答

使用文档的 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);
比公认的答案更有用,当窗口失焦时,我在加载计时器时遇到了问题。
2021-03-21 23:12:04
Opera 不支持此功能。令人平静的事实是他们正在将渲染引擎切换到 Webkit :)
2021-03-24 23:12:04
我尝试了上面链接中的示例,它在 IE7+、Chrome 和 FF4 中运行良好。+1 给你。
2021-03-25 23:12:04
与此同时,你可以使用这样的东西来获得 Opera 中的功能: if(typeof document.hasFocus === 'undefined') { document.hasFocus = function () { return document.visibilityState == 'visible'; } }
2021-03-26 23:12:04
很棒的小功能,比我遇到的其他 jQuery 等价物要好得多。
2021-04-06 23:12:04

我没有在其他浏览器中测试过这个,但它似乎在 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);
});​
我相信每个框架都有自己的window对象,所以如果你要使用框架,你可能只需要在每个框架中包含脚本。
2021-03-12 23:12:04
@jball - 我猜测 Tab 键会破坏它,因为 jsFiddle 在其他框架中有很多输入元素。摆脱框架,我敢打赌它会对你更好一点。
2021-03-14 23:12:04
使用window.top检查顶层窗口。
2021-03-14 23:12:04
@jball - 必须是 IE 吗?在 Webkit 和 Firefox 中,窗口的任何激活都会触发焦点。我想知道是否有针对 IE 的解决方法。另外,您是否在您的页面上进行了测试?也许存在问题,因为 jsFiddle 使用框架?
2021-03-23 23:12:04
实际上是铬。经过进一步测试,我的第一条评论可能是错误的——打破它的tab键似乎更一致。
2021-04-02 23:12:04

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

由于基于事件的解决方案,我喜欢这个答案恕我直言,这应该是首选的方式。
2021-04-11 23:12:04

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 不能很好地工作

测试更新

切换选项卡时显然不会触发模糊。:(
2021-03-24 23:12:04