반응형
JavaScript / jQuery : 창에 포커스가 있는지 테스트
브라우저에 포커스가 있는지 어떻게 테스트합니까?
나는 이것을 다른 브라우저에서 테스트하지 않았지만 Webkit에서 작동하는 것 같습니다. IE를 사용해 보겠습니다. :영형)
시도해보세요 : 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);
});
문서의 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);
간단한 자바 스크립트 스 니펫
이벤트 기반 :
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>
HTML :
<button id="clear">clear log</button>
<div id="event"></div>
자바 스크립트 :
$(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는 잘 작동하지 않습니다.
참고 URL : https://stackoverflow.com/questions/3479734/javascript-jquery-test-if-window-has-focus
반응형
'Development Tip' 카테고리의 다른 글
Kotlin에서 인라인 함수를 언제 사용합니까? (0) | 2020.10.08 |
---|---|
C # IN 연산자가 있습니까? (0) | 2020.10.08 |
GitHub Wiki (gollum) 저장소에 이미지를 삽입 하시겠습니까? (0) | 2020.10.08 |
Firebug가 toFixed ()가 함수가 아니라고 말하는 이유는 무엇입니까? (0) | 2020.10.08 |
하나의 명령으로 Dockerfile 빌드 및 실행 (0) | 2020.10.08 |