브라우저 새로 고침과 창 닫기를 구별하는 방법은 무엇입니까?

브라우저 새로 고침 작업과 닫기 작업 구별

페이지 새로 고침과 브라우저 닫기를 구별하는 것이 어려울 수 있습니다. 두 작업 모두 트리거되기 때문입니다. ONUNLOAD 이벤트. 그러나 이 난제에 대한 해결책이 있습니다.

해결책:

이 접근 방식은 HTML5 로컬 저장소 및 서버-클라이언트 통신을 활용합니다.

1. ONUNLOAD 핸들러: 페이지에서 의사 JavaScript를 사용하여 창에 on-unload 핸들러를 추가합니다.

   <code class="javascript">function myUnload(event) {
       if (window.localStorage) {
           window.localStorage['myUnloadEventFlag'] = new Date().getTime();
       }
       askServerToDisconnectUserInAFewSeconds(); // Synchronous AJAX call
   }</code>

   로그인 후 복사

   이 함수:

   • 로컬 저장소에서 페이지가 언로드되도록 플래그를 지정합니다.
   • 몇 초 후에 사용자 연결을 끊도록 서버에 비동기적으로 알립니다.

2. ONLOAD 핸들러 : 본문에 on-load 핸들러를 추가합니다:

   <code class="javascript">function myLoad(event) {
       if (window.localStorage) {
           var t0 = Number(window.localStorage['myUnloadEventFlag']);
           if (isNaN(t0)) t0 = 0;
           var t1 = new Date().getTime();
           var duration = t1 - t0;
           if (duration < 10 * 1000) {
               // Browser reload
               askServerToCancelDisconnectionRequest(); // Asynchronous AJAX call
           } else {
               // Tab/window close
               // Perform desired actions (e.g., do nothing)
           }
       }
   }</code>

   로그인 후 복사

   이 기능:

   • 이전 언로드 이벤트 이후의 시간 차이를 확인합니다.
   • 10초 미만이면 브라우저 새로고침
   • 10초 이상 지나면 탭/창 닫기
3. 서버 상호 작용: 서버에서 연결 해제 요청 목록을 유지하고 타이머 스레드를 사용하여 목록을 검사합니다. 시간 초과(예: 5초) 후에 연결 해제 요청을 처리하고 수신 시 취소를 처리합니다.

이 솔루션은 탭/창 닫기, 작업 새로고침, 링크 따라가기, 제출된 양식을 구별하는 데 효과적입니다. HTML5 로컬 저장소를 지원하는 브라우저에서 적용 가능합니다. 그러나 이는 언로드 이벤트에 의존하며 MSIE7과 같은 이전 브라우저와 호환되지 않을 수 있습니다.

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