JavaScript를 사용하여 비활성 브라우저 창을 어떻게 감지할 수 있습니까?

비활성 브라우저 창 감지

JavaScript로 작업할 때 브라우저 창이 현재 비활성 상태인지 확인하는 것이 도움이 될 수 있습니다. 이를 통해 사용자가 페이지를 보고 있지 않을 때 불필요한 작업을 중지하여 성능을 최적화할 수 있습니다.

페이지 가시성 API 활용

브라우저 비활성을 감지하는 안정적인 방법은 다음과 같습니다. 페이지 가시성 API를 통해. 이 API는 페이지가 사용자에게 표시되는지 여부를 나타내는 "hidden" 속성을 제공합니다.

document.addEventListener("visibilitychange", onchange);

"hidden" 속성이 true인 경우 페이지는 현재 활성화되지 않은 것입니다. 이 정보를 사용하여 JavaScript 작업을 일시 중지하거나 최소화할 수 있습니다.

브라우저 호환성

Page Visibility API는 Chrome을 포함한 주요 브라우저의 최신 버전에서 지원됩니다. Internet Explorer, Firefox 및 Opera.

호환되지 않는 대체 장치 브라우저

Page Visibility API를 지원하지 않는 브라우저의 경우 흐림/초점 방법으로 돌아갈 수 있습니다. 이러한 이벤트는 신뢰성이 떨어지지만 기본 수준의 감지 기능을 제공할 수 있습니다.

(function() {
  var hidden = "hidden";

  // ... (code for fallbacks to blur/focus)
})();

구현 예

아래 코드는 Page Visibility API를 사용하는 방법을 보여줍니다. 비활성 브라우저 창을 감지하는 대체 방법:

var hidden = "hidden";

if (hidden in document)
  document.addEventListener("visibilitychange", onchange);
else if ((hidden = "mozHidden") in document)
  document.addEventListener("mozvisibilitychange", onchange);
else if ((hidden = "webkitHidden") in document)
  document.addEventListener("webkitvisibilitychange", onchange);
else if ((hidden = "msHidden") in document)
  document.addEventListener("msvisibilitychange", onchange);
else if ("onfocusin" in document)
  document.onfocusin = document.onfocusout = onchange;
else
  window.onpageshow = window.onpagehide
    = window.onfocus = window.onblur = onchange;

function onchange(evt) {
  var v = "visible", h = "hidden",
      evtMap = {
        focus: v, focusin: v, pageshow: v, blur: h, focusout: h, pagehide: h
      };

  evt = evt || window.event;
  if (evt.type in evtMap)
    document.body.className = evtMap[evt.type];
  else
    document.body.className = this[hidden] ? "hidden" : "visible";
}

// Set the initial state
if (document[hidden] !== undefined)
  onchange({ type: document[hidden] ? "blur" : "focus" });

위 내용은 JavaScript를 사용하여 비활성 브라우저 창을 어떻게 감지할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!