'페이지 나가기'를 구현하는 방법은 무엇입니까? 저장되지 않은 변경사항을 확인하시겠습니까?

"이 페이지에서 벗어나시겠습니까?" 구현 방법 저장되지 않은 변경 사항이 있는 경우 확인

웹 페이지를 탐색할 때 저장되지 않은 변경 사항이 있는 페이지에서 벗어나기 전에 사용자가 확인 메시지가 나타날 수 있습니다. 이 확인은 계속 진행하면 저장되지 않은 변경 사항이 손실된다는 사실을 사용자에게 알리는 역할을 합니다. 이 기사에서는 이 기능을 구현하는 방법을 살펴보고 다양한 기능을 갖춘 브라우저에서 직면하는 특정 문제를 해결합니다.

한 가지 방법은 window.onbeforeunload 이벤트를 활용하는 것입니다. 역사적으로 이 이벤트에는 문자열 값을 할당하여 사용자 정의 확인 메시지를 표시할 수 있었지만 최신 브라우저는 이를 보안 위험으로 간주하여 이제 일반 메시지만 표시합니다. 그 결과 구현이 다음과 같이 단순화되었습니다.

// Enable navigation prompt
window.onbeforeunload = function() {
    return true;
};

// Remove navigation prompt
window.onbeforeunload = null;

레거시 브라우저 지원을 위해서는 보다 포괄적인 접근 방식이 필요합니다. window.onbeforeunload 이벤트에는 함수 참조가 할당되어야 하며, 이전 브라우저에서는 이벤트의 returnValue 속성이 설정되어야 합니다.

var confirmOnPageExit = function (e) {
    // Get the event object
    e = e || window.event;

    // Set the return value to display the message
    if (e) {
        e.returnValue = 'Confirm exit? Unsaved changes will be lost.';
    }

    // Return the message for newer browsers
    return 'Confirm exit? Unsaved changes will be lost.';
};

확인 프롬프트를 전환하려면 확인 OnPageExit 함수를 window에 할당하기만 하면 됩니다. onbeforeunload를 사용하여 활성화하고 기능을 제거하여 비활성화합니다.

// Turn it on
window.onbeforeunload = confirmOnPageExit;

// Turn it off
window.onbeforeunload = null;

저장되지 않은 변경 사항을 추적하려면 다음을 사용해야 합니다. 사용되는 특정 검증 프레임워크. 예를 들어 jQuery에서 다음 코드 조각은 입력 필드의 변경 사항을 모니터링하고 확인 프롬프트를 트리거하는 방법을 보여줍니다.

$('input').change(function() {
    if( $(this).val() != "" ) {
        window.onbeforeunload = confirmOnPageExit;
    }
});

위 내용은 '페이지 나가기'를 구현하는 방법은 무엇입니까? 저장되지 않은 변경사항을 확인하시겠습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!