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

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

많은 웹사이트에서는 리소스 집약적일 수 있는 주기적인 활동을 수행합니다. 성능과 사용자 경험을 최적화하려면 사용자가 페이지를 적극적으로 보고 있지 않을 때 이러한 활동을 일시 중지하는 것이 좋습니다.

창 비활성 감지 문제

사용자가 브라우저 창이나 탭을 적극적으로 보는 것은 웹 개발의 근본적인 과제입니다. window.onfocus 및 window.onblur 이벤트는 기본 기능을 제공하지만 사용자가 창을 떠나지 않고도 다른 탭이나 애플리케이션으로 포커스를 이동할 수 있으므로 신뢰할 수 없을 수 있습니다.

해결책: Page Visibility API

이 문제에 대한 현대적이고 안정적인 솔루션은 Page Visibility API입니다. 대부분의 주요 브라우저에서 지원되는 이 API는 페이지나 탭이 사용자 보기에서 숨겨지는 경우를 감지하는 방법을 제공합니다.

document.addEventListener("visibilitychange", function() {
  if (document.visibilityState === "hidden") {
    // Pause periodic activities
  } else {
    // Resume periodic activities
  }
});

안타깝게도 이 API는 IE 10 이하에서는 지원되지 않습니다. 이러한 구형 브라우저의 경우 onblur/onfocus 및 onpageshow/onpagehide 이벤트와 관련된 덜 안정적인 대체 방법을 사용할 수 있습니다.

var hidden = "hidden";

// Compatibility checks
if (hidden in document) {
  // Supported: Page Visibility API
} else if ((hidden = "mozHidden") in document) {
  // Mozilla-specific
} else if ((hidden = "webkitHidden") in document) {
  // WebKit-based
} else if ((hidden = "msHidden") in document) {
  // Microsoft-specific
} else {
  // Legacy events
}

function onchange(evt) {
  if (evt.type in evtMap) {
    document.body.className = evtMap[evt.type];
  } else {
    document.body.className = this[hidden] ? "hidden" : "visible";
  }
}

Page Visibility API 및 해당 대체 기능을 활용하면 창 비활성을 효과적으로 감지하고 이에 따라 코드 성능이 향상됩니다.

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