ProgramingTip

Javascript를 사용하여 Chrome에서 탭에 포커스가 있는지 여부를 감지하는 방법은 무엇입니까?

bestdevel 2020. 11. 1. 18:27
반응형

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);

참고 URL : https://stackoverflow.com/questions/2720658/how-to-detect-when-a-tab-is-focused-or-not-in-chrome-with-javascript

반응형