JavaScript를 공유하여 웹페이지 닫기 및 닫기 이벤트_javascript 기술 습득

웹 개발을 할 때 우리는 이 블로그 에디터처럼 사용자에게 닫기 포기를 선택할 수 있는 기회를 줄 수 있는 onbeforeunload 페이지 닫기 이벤트를 자주 사용합니다. 사용자가 떠나기로 선택하면 onunload 이벤트가 자연스럽게 트리거되지만 사용자가 취소를 선택하면 이를 감지하는 방법은 무엇입니까?

페이지에서 onunloadcancel이라는 취소 이벤트를 남긴다고 가정합니다. 분명히 이 이벤트는 사용자가 대화 상자의 취소 버튼을 누른 후에 발생해야 합니다. 그러나 프롬프트 대화 상자를 닫기 위한 트리거 프로세스는 그렇게 간단하지 않습니다. 먼저 이 프로세스를 검토해 보겠습니다.

코드 복사 코드는 다음과 같습니다.

window.onbeforeunload = function()
{
return "정말로 나가시겠습니까?";
}

사용자가 페이지를 떠날 준비가 되면(예: 닫기 버튼을 누르거나 페이지를 새로 고치는 등) onbeforeunload 이벤트가 트리거됩니다. 우리 스크립트는 이 이벤트에서 페이지가 닫히는 것을 방지할지 여부를 결정할 수 없습니다. 이 문자열은 선택 닫기 대화 상자에 설명 텍스트로만 표시됩니다. . 그러나 어느 것을 선택해야 할지 우리는 알 수 없습니다.

그러나 이 문제를 주의 깊게 분석해 보면 실제로는 그렇지 않습니다. 사용자가 실제로 페이지를 닫기로 선택하면 실행 중인 모든 코드가 사라지고 사용자가 페이지에 계속 머무르면 onbeforeunload 이벤트를 제외하고는 아무 일도 일어나지 않은 것처럼 처리됩니다. 따라서 onbeforeunload 이벤트에서 약간의 트릭을 수행하고 몇 밀리초 후에 시작되는 타이머를 여기에 등록합니다. 페이지가 실제로 닫히면 타이머는 유효하지 않으며 페이지는 여전히 남아 있습니다. 본질적으로 비동기 인터페이스 상호 작용 이벤트에는 오류가 없습니다.

코드 복사 코드는 다음과 같습니다.

onunloadcancel을 실행하기 위해 setTimeout을 사용하고 10ms를 지연합니다. 페이지가 실제로 닫히면 타이머는 물론 삭제됩니다. 그렇지 않으면 계속 진행하세요. 그런데 테스트 중에 FireFox에서 두 가지 버그를 발견했습니다.

가끔 닫기 버튼을 누르면 onunloadcancel도 실행되면서 대화 상자가 깜박이는 경우가 있습니다. while(1);으로 변경하면 브라우저는 계속 정지됩니다. 즉, onunloadcancel이 실제로 실행되지만 인터페이스만 파괴되고 스크립트 실행은 일시 중지되지 않습니다.
페이지를 새로고침하여 나가면 onbeforeunload가 한 번만 실행되지만, X 버튼을 눌러 페이지를 닫으면 onbeforeunload가 두 번 실행됩니다. 따라서 FF와 호환되도록 개선이 필요합니다.

코드 복사 코드는 다음과 같습니다.