>웹 프론트엔드 >JS 튜토리얼 >JavaScript에서 페이지 새로 고침과 브라우저 종료를 구별하는 방법은 무엇입니까?

JavaScript에서 페이지 새로 고침과 브라우저 종료를 구별하는 방법은 무엇입니까?

DDD
DDD원래의
2024-11-03 17:42:29417검색

How to Distinguish Between Page Refresh and Browser Closure in JavaScript?

페이지 새로 고침과 브라우저 종료 식별

ONUNLOAD 이벤트가 트리거되면 페이지 새로 고침과 브라우저 닫기를 구별하기가 어려워집니다. . 이 문서에서는 이 문제에 대한 솔루션을 제시합니다.

솔루션

이 솔루션은 HTML5의 로컬 저장소와 서버-클라이언트 AJAX 통신을 활용합니다.

  1. 창 언로드 핸들러:

    • 창에 onunload 핸들러를 등록합니다.
    • 이 핸들러에서 페이지 언로드를 나타내는 로컬 스토리지 플래그를 설정합니다( myUnloadEventFlag).
    • 서버에 AJAX 요청을 보내 지정된 지연(예: 5초) 후에 사용자 연결을 끊도록 요청합니다.
  2. 본문 로드 핸들러:

    • 페이지 본문에 온로드 핸들러를 등록합니다.
    • 이 핸들러에서 언로드 이벤트에 대한 로컬 스토리지 플래그를 확인합니다.
    • 현재 시간과 플래그 시간의 차이가 지정된 지연 시간보다 작을 경우 페이지가 다시 로드된 것이므로 서버 연결 끊기 요청을 취소해야 합니다.
    • 그렇지 않으면 브라우저 종료입니다.
  3. 서버 처리:

    • 연결 해제 요청 목록을 유지합니다.
    • 정기적으로 검사하는 타이머를 실행합니다. 목록.
    • 요청 시간 초과가 만료되면 사용자 연결을 해제합니다.
    • 취소 요청이 수신되면 해당 연결 해제 요청을 목록에서 제거합니다.

이 접근 방식은 언로드 이벤트의 타이밍을 고려하여 탭/창 닫기와 페이지 새로고침을 구별합니다. 관련 페이지에 이벤트 핸들러를 배치하여 팔로우한 링크 및 제출된 양식과 같은 다른 이벤트에 적용할 수 있습니다.

제한 사항:

이 솔루션에는 HTML5 로컬 저장소 지원이 필요하며 그렇지 않을 수도 있습니다. MSIE7과 같은 이전 브라우저에서 작동합니다.

위 내용은 JavaScript에서 페이지 새로 고침과 브라우저 종료를 구별하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.