JavaScript에서 창 닫기 이벤트를 안정적으로 캡처하고 작업을 실행하려면 어떻게 해야 합니까?

JavaScript에서 창 닫기 이벤트 캡처 및 작업 실행

특히 창 닫기를 통해 사용자가 지정된 페이지를 떠날 때를 결정하는 것이 어려울 수 있습니다. . 이 이벤트를 캡처하고 작업을 수행하는 방법은 다음과 같습니다.

최신 브라우저(2024 이상)

Beacon API는 창 닫기 이벤트를 캡처하기 위한 솔루션을 제공합니다. 비콘 요청은 사용자가 페이지를 종료할 때에도 완료되도록 설계되어 안정적인 데이터 수집을 보장합니다.

var url = "https://example.com/foo";
var data = "bar";

navigator.sendBeacon(url, data);

이벤트 모니터링

요청을 시작해야 하는 경우 마지막 순간에 visiblechange 이벤트를 모니터링하세요. 이 이벤트는 페이지 가시성이 활성에서 숨김으로 변경될 때 트리거되어 사용자가 페이지를 떠났을 수 있음을 나타냅니다.

document.addEventListener('visibilitychange', function() {
  if (document.visibilityState === "hidden") {
    // Send beacon request
  }
});

이전 브라우저 지원

이전 버전과의 호환성을 위해 , 페이지 수명주기를 관리하려면 lifecycle.js 라이브러리를 사용하는 것이 좋습니다. 이벤트:

lifecycle.addEventListener('statechange', function(event) {
  if (event.originalEvent == 'visibilitychange' && event.newState == 'hidden') {
    var url = "https://example.com/foo";
    var data = "bar";

    navigator.sendBeacon(url, data);
  }
});

참고: Adblocker는 sendBeacon 요청을 방해할 수 있습니다. 동일한 출처 요청을 사용하거나 일반 추적 URL을 피하는 것이 좋습니다.

위 내용은 JavaScript에서 창 닫기 이벤트를 안정적으로 캡처하고 작업을 실행하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!