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

JavaScript로 비활성 브라우저 Windows 감지

사용자가 웹사이트에서 다른 곳으로 이동할 때 특정 활동을 일시 중지하는 것이 도움이 될 수 있습니다. 전통적으로 JavaScript에는 창 비활성을 감지하는 안정적인 방법이 부족했습니다. 다행스럽게도 웹 표준과 Page Visibility API의 발전으로 이것이 가능해졌습니다.

Page Visibility API

Page Visibility API를 사용하면 개발자가 웹사이트의 가시성 상태를 확인할 수 있습니다. "visibilitychange" 이벤트를 구독하면 창이 표시되거나 숨겨지는 시기를 감지할 수 있습니다. API에 대한 브라우저 지원은 다음과 같습니다.

• Chrome 13
• Internet Explorer 10
• Firefox 10
• Opera 12.10

document.addEventListener("visibilitychange", onchange);

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

Page Visibility API를 지원하지 않는 브라우저의 경우 "blur" 및 "focus"와 같은 이벤트 기반 대체 방법을 사용할 수 있습니다. 이 방법은 신뢰성은 떨어지지만 유사한 기능을 달성하는 데 사용할 수 있습니다.

(function() {
  // Check for standards support
  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);
  }
  
  // Fallback for IE 9+
  else if ("onfocusin" in document) {
    document.onfocusin = document.onfocusout = onchange;
  }
  
  // Event mapping
  function onchange(evt) {
    var hiddenMapping = {
      focus: "visible",
      focusin: "visible",
      pageshow: "visible",
      blur: "hidden",
      focusout: "hidden",
      pagehide: "hidden"
    };
  
    evt = evt || window.event;
    if (evt.type in hiddenMapping) {
      document.body.className = hiddenMapping[evt.type];
    } else {
      document.body.className = document[hidden] ? "hidden" : "visible";
    }
  }
  
  // Set initial state
  if (document[hidden] !== undefined) {
    onchange({
      type: document[hidden] ? "blur" : "focus"
    });
  }
})();

구현 예

다음 예는 페이지 가시성 API를 사용하여 스크립트 실행을 일시 중지하는 방법을 보여줍니다. 브라우저 창이 비활성 상태인 경우:

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

Page Visibility API 및 JavaScript 이벤트 처리를 활용하면 이제 기반에 따라 활동을 효과적으로 일시 중지하거나 재개할 수 있습니다. 브라우저 창의 가시성 상태에 대해.

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