사용자가 저장되지 않은 변경 사항이 있는 웹 페이지를 떠나는 것을 방지하려면 어떻게 해야 합니까?

저장되지 않은 변경 사항 방지

웹 페이지에서 데이터를 수정할 때 사용자가 변경 사항을 저장하지 않고 다른 곳으로 이동하는 것을 방지하려는 것이 일반적입니다. 변화. 이는 window.onbeforeunload 이벤트를 사용하여 달성할 수 있습니다.

구현

레거시 브라우저(IE6-8, Firefox 1-3.5)

1. 세트 문자열을 반환하는 함수에 window.onbeforeunload:

   window.onbeforeunload = function() {
       return "Unsaved changes. Are you sure you want to leave?";
   };

2. 이벤트를 제거하여 비활성화:

   window.onbeforeunload = null;

최신 브라우저(Chrome, Firefox, 등)

1. 프롬프트 활성화:

   window.onbeforeunload = function() {
       return true;
   };

2. 프롬프트 비활성화:

   window.onbeforeunload = null;

추적 변경 사항

변경 사항이 있는지 확인하려면 유효성 검사 프레임워크나 사용자 정의 이벤트 핸들러를 사용하세요.

jQuery 예:

$('input').change(function() {
    if ($(this).val() != "") {
        // Enable the prompt
        window.onbeforeunload = function() {
            return true;
        };
    }
});

브라우저별 고려 사항

• Chrome 및 Safari는 일반 메시지만 표시하고 맞춤 메시지는 방지합니다.
• Firefox는 URL 변경이 아닌 양식 제출 시에만 메시지를 표시합니다.

위 내용은 사용자가 저장되지 않은 변경 사항이 있는 웹 페이지를 떠나는 것을 방지하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!