[javascript] “이 페이지에서 벗어나시겠습니까?”를 표시하는 방법 언제 변경 사항이 커밋됩니까?

JAVASCRIPT / 글쓴이

여기에서 스택 오버플로에서 변경을 시작한 다음 페이지에서 벗어나려고하면 자바 스크립트 확인 버튼이 나타나고 “이 페이지에서 벗어나시겠습니까?” 블레 블러 블 …

누구든지 전에 이것을 구현 했습니까? 변경 사항이 커밋되었음을 어떻게 추적합니까? 나는 이것을 스스로 할 수 있다고 믿습니다. 전문가들로부터 좋은 관행을 배우려고 노력하고 있습니다.

다음을 시도했지만 여전히 작동하지 않습니다.

<html>
<body>
    <p>Close the page to trigger the onunload event.</p>
    <script type="text/javascript">
        var changes = false;
        window.onbeforeunload = function() {
            if (changes)
            {
                var message = "Are you sure you want to navigate away from this page?\n\nYou have started writing or editing a post.\n\nPress OK to continue or Cancel to stay on the current page.";
                if (confirm(message)) return true;
                else return false;
            }
        }
    </script>

    <input type='text' onchange='changes=true;'> </input>
</body>
</html>

누구나 예를 게시 할 수 있습니까?

답변

업데이트 (2017)

최신 브라우저는 이제 사용자 지정 메시지를 보안 위험 요소로 표시하는 것을 고려하여 모든 메시지에서 제거 되었습니다 . 브라우저는 이제 일반 메시지 만 표시합니다. 더 이상 메시지 설정에 대해 걱정할 필요가 없으므로 다음과 같이 간단합니다.

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

레거시 브라우저 지원에 대해서는 아래를 읽으십시오.

업데이트 (2013)

원래 답변은 IE6-8 및 FX1-3.5 (2009 년에 작성되었을 때 다시 타겟팅 한 것)에 적합하지만 지금은 구식이 아니며 대부분의 최신 브라우저에서 작동하지 않습니다. 아래 참조하십시오.

는 window.onbeforeunload모든 브라우저에서 일관되게 처리되지 않습니다. 문자열은 아닌 함수 참조 여야하지만 (원래 답변이 명시되어 있음) 이전 브라우저 onbeforeunload에서 작동합니다 null.

window.onbeforeunload함수 참조로 설정 했지만 이전 브라우저 returnValue에서는 문자열을 반환하는 대신 이벤트 를 설정해야 합니다.

var confirmOnPageExit = function (e)
{
    // If we haven't been passed the event get the window.event
    e = e || window.event;

    var message = 'Any text will block the navigation and display a prompt';

    // For IE6-8 and Firefox prior to version 4
    if (e)
    {
        e.returnValue = message;
    }

    // For Chrome, Safari, IE8+ and Opera 12+
    return message;
};

confirmOnPageExit사용자가 메시지없이 계속하려면 검사 를 수행하고 null을 반환 할 수 없습니다 . 이벤트를 안정적으로 켜고 끄려면 여전히 이벤트를 제거해야합니다.

// Turn it on - assign the function that returns the string
window.onbeforeunload = confirmOnPageExit;

// Turn it off - remove the function entirely
window.onbeforeunload = null;

원래 답변 (2009 년에 작업)

켜려면 :

window.onbeforeunload = "Are you sure you want to leave?";

끄려면 :

window.onbeforeunload = null;

이것은 정상적인 이벤트가 아니라는 것을 명심하십시오. 표준 방식으로 묶을 수는 없습니다.

값을 확인하려면? 이는 유효성 검사 프레임 워크에 따라 다릅니다.

jQuery에서 이것은 (매우 기본적인 예)와 같을 수 있습니다 :

$('input').change(function() {
    if( $(this).val() != "" )
        window.onbeforeunload = "Are you sure you want to leave?";
});

답변

onbeforeunload마이크로 소프트주의는 우리가 표준 용액을 가지고 있지만, 브라우저 지원이 고르지 알고 있어야 가장 가까운 것입니다; 예를 들어 Opera의 경우 버전 12 이상에서만 작동합니다 (여전히 작성중인 베타 버전).

또한 호환성 을 극대화 하려면 Mozilla Developer Network 에 설명 된대로 단순히 문자열을 반환하는 것 이상의 작업을 수행해야합니다 .

예 : 탐색 프롬프트를 활성화 / 비활성화하기 위해 다음 두 기능을 정의하십시오 (MDN 예 참조).

function enableBeforeUnload() {
    window.onbeforeunload = function (e) {
        return "Discard changes?";
    };
}
function disableBeforeUnload() {
    window.onbeforeunload = null;
}

그런 다음 다음과 같은 양식을 정의하십시오.

<form method="POST" action="" onsubmit="disableBeforeUnload();">
    <textarea name="text"
              onchange="enableBeforeUnload();"
              onkeyup="enableBeforeUnload();">
    </textarea>
    <button type="submit">Save</button>
</form>

이런 식으로, 사용자는 텍스트 영역을 변경 한 경우 탐색에 대한 경고 만 받고 실제로 양식을 제출할 때 프롬프트되지 않습니다.

답변

Chrome 및 Safari 에서이 작업을 수행하려면 다음과 같이해야합니다.

window.onbeforeunload = function(e) {
    return "Sure you want to leave?";
};

참조 : https://developer.mozilla.org/en/DOM/window.onbeforeunload

답변

JQuery를 사용하면 이 작업을 매우 쉽게 수행 할 수 있습니다. 세트에 바인딩 할 수 있기 때문입니다.

온로드를 수행하기에는 충분하지 않으며 누군가 편집을 시작한 경우에만 탐색을 트리거하려고합니다.

답변

jquerys ‘beforeunload’가 저에게 효과적이었습니다.

$(window).bind('beforeunload', function(){
    if( $('input').val() !== '' ){
        return "It looks like you have input you haven't submitted."
    }
});

답변

간단한 솔루션을 찾는 새로운 사람들을 위해 Areyousure.js를 사용해보십시오.

답변

이는 양식에 데이터가 입력 된 경우 메시지를 표시하고 양식이 제출 된 경우 메시지를 표시하지 않는 쉬운 방법입니다.

$(function () {
    $("input, textarea, select").on("input change", function() {
        window.onbeforeunload = window.onbeforeunload || function (e) {
            return "You have unsaved changes.  Do you want to leave this page and lose your changes?";
        };
    });
    $("form").on("submit", function() {
        window.onbeforeunload = null;
    });
})