JavaScript는 브라우저 창 비활성을 어떻게 감지할 수 있습니까?

JavaScript를 사용하여 브라우저 창 비활성 감지

브라우저 창이 활발하게 초점을 맞추고 있지 않은지 확인하는 것은 성능과 사용자 경험을 최적화하는 데 필수적입니다. JavaScript는 이를 달성하기 위한 여러 가지 옵션을 제공합니다.

Page Visibility API

Page Visibility API는 페이지가 사용자에게 숨겨지는 시기를 감지할 수 있는 안정적인 방법을 제공합니다. 이 API는 Chrome, Firefox 및 Internet Explorer를 포함한 대부분의 최신 브라우저에서 지원됩니다.

페이지 가시성 API를 사용하려면 다음 이벤트 리스너를 추가하세요.

document.addEventListener("visibilitychange", onchange);

onchange 함수 내에 , document.visibilityState 속성을 확인하여 페이지가 숨겨져 있는지 여부를 확인할 수 있습니다. visible:

function onchange(evt) {
  if (document.visibilityState == "hidden") {
    // Page is not active
  } else {
    // Page is active
  }
}

블러/포커스 이벤트로 대체

페이지 가시성 API를 지원하지 않는 브라우저의 경우 블러 및 포커스 이벤트를 사용하도록 대체할 수 있습니다. . 이 방법은 사용자가 탭을 전환하거나 모달 창을 불러올 때 트리거될 수 있으므로 신뢰성이 낮습니다.

흐림/초점 이벤트를 사용하려면 다음 이벤트 리스너를 추가하세요.

window.onblur = function() {
  // Window is not active
};

window.onfocus = function() {
  // Window is active
};

호환성 고려 사항

페이지 가시성 API는 대부분의 주요 브라우저에서 지원됩니다. 이벤트는 모든 최신 브라우저에서 지원됩니다. 호환성을 극대화하려면 지원되는 경우 Page Visibility API를 사용하고 그렇지 않으면 흐림/초점 이벤트로 대체하는 것이 좋습니다.

이러한 기술을 구현하면 브라우저 창에 초점이 맞지 않는 경우를 효과적으로 감지하고 조정할 수 있습니다. 이에 따라 JavaScript는 웹사이트의 성능과 사용자 경험을 향상시킵니다.

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