브라우저 / 탭이 활성화되어 있는지 확인하는 방법

브라우저 / 탭이 활성화되어 있는지 확인하는 방법

---

가능한 중복 :
브라우저 창이 현재 활성화되어 있지 않은지를 감지하는 방법이 있습니까?

현재 페이지가 전경에있는 경우에만 실행하려는 매초마다 호출되는 함수가 있습니다. 즉, 사용자가 브라우저를 최소화하지 않았거나 다른 탭으로 전환하지 않았습니다. 사용자가 그것을 보지 않고 잠재적으로 CPU 집약적 인 경우 목적을 제공하지 않으므로 백그라운드에서 사이클을 낭비하고 싶지 않습니다.

JavaScript로 이것을 말하는 방법을 아는 사람이 있습니까?

참고 : jQuery를 사용하므로 귀하의 답변에서 사용하면 괜찮습니다. :).

---

창의 focus및 blur이벤트를 사용합니다 .

var interval_id;
$(window).focus(function() {
    if (!interval_id)
        interval_id = setInterval(hard_work, 1000);
});

$(window).blur(function() {
    clearInterval(interval_id);
    interval_id = 0;
});

---

"Double Fire"의 주석이 달린 문제에 답변하고 jQuery의 사용 편의성을 유지하려면 :

$(window).on("blur focus", function(e) {
    var prevType = $(this).data("prevType");

    if (prevType != e.type) {   //  reduce double fire issues
        switch (e.type) {
            case "blur":
                // do work
                break;
            case "focus":
                // do work
                break;
        }
    }

    $(this).data("prevType", e.type);
})

보려면 클릭 작업을 보여주는 예제 코드 (JSFiddle)

---

Richard Simões의 답변 외에도 페이지 가시성 API를 사용할 수도 있습니다 .

if (!document.hidden) {
    // do what you need
}

이 사양은 사이트 개발자가 페이지의 현재 가시성 상태를 프로그래밍 방식으로 결정하여 전력 및 CPU 효율적인 웹 응용 프로그램을 개발할 수있는 수단을 정의합니다.

자세히 알아보기 (2019 업데이트)

• 모든 최신 브라우저가 지원합니다 document.hidden
• http://davidwalsh.name/page-visibility
• https://developers.google.com/chrome/whitepapers/pagevisibility
• 창 / 탭이 숨겨져있을 때 비디오 일시 중지 예
  https://web.archive.org/web/20170609212707/http://www.samdutton.com/pageVisibility/

---

window.onfocus및 window.onblur이벤트 에 플래그를 설정하려고 합니다.

다음 스 니펫은 Firefox, Safari 및 Chrome에서 테스트되었으며 콘솔을 열고 탭 간을 앞뒤로 이동합니다.

var isTabActive;

window.onfocus = function () { 
  isTabActive = true; 
}; 

window.onblur = function () { 
  isTabActive = false; 
}; 

// test
setInterval(function () { 
  console.log(window.isTabActive ? 'active' : 'inactive'); 
}, 1000);

여기서 사용해보십시오 .

---

jQuery 사용하기 :

$(function() {
    window.isActive = true;
    $(window).focus(function() { this.isActive = true; });
    $(window).blur(function() { this.isActive = false; });
    showIsActive();
});

function showIsActive()
{
    console.log(window.isActive)
    window.setTimeout("showIsActive()", 2000);
}

function doWork()
{
    if (window.isActive) { /* do CPU-intensive stuff */}
}

---

여기의 모든 예제 (rockacola 제외)는 사용자가 실제로 창을 클릭하여 포커스를 정의해야합니다. 이것은 이상적이지 않으므로 .hover()더 나은 선택입니다.

$(window).hover(function(event) {
    if (event.fromElement) {
        console.log("inactive");
    } else {
        console.log("active");
    }
});

이것은 사용자가 화면에 마우스를 가지고있을 때 알려주지 만, 마우스가 다른 곳에 있으면 마우스가 포 그라운드에 있는지 알려줍니다.

---

Chrome에서 열었을 때 (페이지에서 '초점을 맞출 때 특정 이벤트가 트리거되는) Google 검색 페이지와 유사한 작업을 수행하려는 경우 hover () 이벤트가 도움이 될 수 있습니다.

$(window).hover(function() {
  // code here...
});

참고 URL : https://stackoverflow.com/questions/1760250/how-to-tell-if-browser-tab-is-active