웹 개발을 할 때, 우리는 이 블로그 편집기와 같이 사용자가 닫기를 포기할 수 있는 기회를 제공할 수 있는 onbeforeunload 페이지 닫기 이벤트를 자주 사용합니다. 사용자가 떠나기로 선택하면 onunload 이벤트가 자연스럽게 트리거되지만 사용자가 취소를 선택하면 이를 감지하는 방법은 무엇입니까?
페이지에서 onunloadcancel이라는 취소 이벤트가 발생한다고 가정합니다. 분명히 이 이벤트는 사용자가 대화 상자의 취소 버튼을 누른 후에 발생해야 합니다. 그러나 프롬프트 대화 상자를 닫기 위한 트리거 프로세스는 그렇게 간단하지 않습니다. 먼저 프로세스를 검토해 보겠습니다.
다음과 같이 코드 코드를 복사합니다.
window.onbeforeunload = 함수()
{
return "정말로 떠나시나요?";
}
사용자가 페이지를 떠날 준비가 되면(예: 닫기 버튼을 누르거나 페이지를 새로 고치는 등) onbeforeunload 이벤트가 트리거됩니다. 우리 스크립트는 이 이벤트에서 페이지가 닫히는 것을 방지할지 여부를 결정할 수 없습니다. 이 문자열은 선택 닫기 대화 상자에 설명 텍스트로만 표시됩니다. . 그러나 어느 것을 선택해야 할지 우리는 알 수 없습니다.
그러나 이 문제를 주의 깊게 분석해 보면 실제로는 그렇지 않습니다. 사용자가 실제로 페이지를 닫기로 선택하면 실행 중인 모든 코드가 사라지고 사용자가 페이지에 계속 머무르면 onbeforeunload 이벤트를 제외하고는 아무 일도 일어나지 않은 것처럼 처리됩니다. 따라서 onbeforeunload 이벤트에서 약간의 트릭을 수행하고 몇 밀리초 후에 시작되는 타이머를 여기에 등록합니다. 페이지가 실제로 닫히면 타이머는 유효하지 않으며 페이지는 여전히 남아 있습니다. 본질적으로 비동기 인터페이스인 이 상호 작용 이벤트에는 오류가 없습니다.
다음과 같이 코드 코드를 복사합니다.
<스크립트 언어="자바스크립트">
window.onbeforeunload = 함수()
{
setTimeout(onunloadcancel, 10);
return "정말로 떠나시나요?";
}
window.onunloadcancel = 함수()
{
Alert("나가는 것을 취소합니다");
}
</script>
onunloadcancel을 실행하기 위해 setTimeout과 10ms 지연을 사용합니다. 페이지가 실제로 닫히면 타이머는 물론 삭제됩니다. 그렇지 않으면 계속 진행하세요. 그러나 테스트 중에 FireFox에 두 가지 버그가 있음이 발견되었습니다.
가끔 닫기 버튼을 누르면 onunloadcancel도 실행되어 대화 상자가 깜박이는 경우가 있습니다. while(1);으로 변경하면 브라우저는 계속 정지됩니다. 즉, onunloadcancel이 실제로 실행되지만 인터페이스만 파괴되고 스크립트 실행은 일시 중지되지 않습니다.
페이지를 새로고침하여 나가면 onbeforeunload가 한 번만 실행되지만, X 버튼을 눌러 페이지를 닫으면 onbeforeunload가 두 번 실행됩니다. 따라서 FF와 호환되도록 개선이 필요합니다.
다음과 같이 코드 코드를 복사합니다.
<스크립트 언어="자바스크립트">
var_t;
window.onbeforeunload = 함수()
{
setTimeout(function(){_t = setTimeout(onunloadcancel, 0)}, 0);
return "정말로 떠나시나요?";
}
window.onunloadcancel = 함수()
{
클리어타임아웃(_t);
Alert("나가는 것을 취소합니다");
}
</script>
여기서는 이유를 설명할 수 없는 방법을 사용합니다. 이는 FF의 버그를 해결하기 위한 해킹으로 간주되어야 합니다.