提问人:Rod 提问时间:8/14/2010 最后编辑:Wayne KoortsRod 更新时间:10/16/2018 访问量:95226
JavaScript / jQuery:测试窗口是否有焦点
JavaScript / jQuery: Test if window has focus
答:
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
我喜欢这个答案,因为基于事件的解决方案。恕我直言,这应该是首选的方式。
评论
document.hasFocus()