Javascript를 사용하여 Chrome에서 탭에 포커스가 있는지 여부를 감지하는 방법은 무엇입니까?
사용자가 현재 Google 크롬에서 탭을 있는지 여부를 알고 싶습니다. 창에 바인딩 된 이벤트 블러와 포커스를 사용하려고했습니다.
window.addEventListener('focus', function() {
document.title = 'focused';
});
window.addEventListener('blur', function() {
document.title = 'not focused';
});
증가 이벤트는 가끔 이상하게 작동합니다. 다른 탭으로 전환했다가 뒤로 돌아 가면 포커스 이벤트가 활성화되지 않습니다. 하지만 주소 표시 줄을 클릭 한 다음 페이지로 돌아 가면됩니다. 또는 다른 프로그램으로 전환 한 다음 Chrome으로 돌아 가면 현재 탭에 점점이 맞춰져 있으면 활성화됩니다.
2015 업데이트 : 가시성 API를 새로운 HTML5 방식 (Blowsie의 의견에서 가져옴) :
document.addEventListener('visibilitychange', function(){
document.title = document.hidden; // change tab text for demo
})
원본 포스터가 제공하는 코드 (질문에서)는 이제 2011 년부터 작동합니다.
window.addEventListener('focus', function() {
document.title = 'focused';
});
window.addEventListener('blur', function() {
document.title = 'not focused';
});
수정 : 몇 달 후 Chrome 14에서 기능은 계속 작동하지만 사용자는 창에서 한 번 이상 아무 곳이나 클릭하여 페이지와 상호 작용해야합니다. 스크롤링만으로 충분하지 않습니다. window.focus()
이 작업을 자동으로 수행 하지 않습니다. 누군가가 해결 방법을 알고있다.
질문에 선택하신 대답 브라우저 창이 현재 활성화되어 있지 않은 방법이 있습니까? 작동해야합니다. 2011-06-02에 W3C에서 초안 한 페이지 가시성 API를 사용합니다 .
결국 작동 할 수도 있고 호기심이 생겨 다음 코드를 작성했습니다.
...
setInterval ( updateSize, 500 );
function updateSize(){
if(window.outerHeight == window.innerHeight){
document.title = 'not focused';
} else {
document.title = 'focused';
}
document.getElementById("arthur").innerHTML = window.outerHeight + " - " + window.innerHeight;
}
...
<div id="arthur">
dent
</div>
이 코드는 원하는 것을 정확하게 수행하지만 추악한 방식입니다. (탭으로 전환하고 1 초 동안 마우스를 사용하면 항상이 발생하는 것입니다).
화면에 다른 값이 표시됩니다.
결론 : 무엇을 하던지 테스트 할 때 결과를 신뢰하지 않는 테스트!
원래 페이지 제목으로 돌아 가려는 모든 사용자 :
// Swapping page titles on blur
var originalPageTitle = document.title;
window.addEventListener('blur', function(){
document.title = 'Don\'t forget to read this...';
});
window.addEventListener('focus', function(){
document.title = originalPageTitle;
});
인라인에 onblur = 및 onfocus = 이벤트를 추가로 발생하지 않는 문제입니다.
이 JQuery와 함께 작동 할 수 있습니다.
$(function() {
$(window).focus(function() {
console.log('Focus');
});
$(window).blur(function() {
console.log('Blur');
});
});
크롬에서는 1 초 미만의 시간 제한으로 백그라운드를 사용하고 탭에 포커스가 크롬은 매초마다 실행합니다. 예;
Firefox 또는 Opera에서는 작동하지 않습니다. 다른 브라우저에 대해서는 모르지만 거기에서도 작동하는지 의심됩니다.
var currentDate = new Date();
var a = currentDate.getTime();
function test() {
var currentDate = new Date();
var b = currentDate.getTime();
var c = b - a;
if (c > 900) {
//Tab does not have focus.
} else {
//It does
}
a = b;
setTimeout("test()",800);
}
setTimeout("test()",1);
'ProgramingTip' 카테고리의 다른 글
Visual Studio에서 Google Chrome을 브라우저로 설정 (0) | 2020.11.01 |
---|---|
CSS / Javascript 호버 문제를 수행하는 방법 (0) | 2020.11.01 |
Postgresql에서 이름으로 제약 조건 삭제 (0) | 2020.11.01 |
Internet Explorer 10 Windows 8 텍스트 입력 및 암호 작업 아이콘 제거 (0) | 2020.11.01 |
C ++ 11 : std :: condition_variable이 std :: unique_lock을 사용하는 이유는 무엇입니까? (0) | 2020.11.01 |