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

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

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

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

<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;
    });
})

Keith의 이미 놀라운 답변 을 확장하려면 :

맞춤 경고 메시지

사용자 정의 경고 메시지를 허용하려면 다음과 같은 기능으로 래핑 할 수 있습니다.

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

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

        // For Chrome, Safari, IE8+ and Opera 12+
        return message;
    };
    window.onbeforeunload = confirmOnPageExit;
}

그런 다음 사용자 정의 메시지로 해당 함수를 호출하십시오.

preventNavigation("Baby, please don't go!!!");

탐색을 다시 활성화

탐색을 다시 활성화하려면으로 설정 window.onbeforeunload하면 null됩니다. 다음은 어디에서나 호출 할 수있는 깔끔한 작은 함수로 싸여 있습니다.

function enableNavigation() {
    window.onbeforeunload = null;
}

jQuery를 사용하여 이것을 요소를 형성하기 위해 바인딩

jQuery를 사용하는 경우 다음과 같이 양식의 모든 요소에 쉽게 바인딩 될 수 있습니다.

$("#yourForm :input").change(function() {
    preventNavigation("You have not saved the form. Any \
        changes will be lost if you leave this page.");
});

그런 다음 양식을 제출할 수 있습니다.

$("#yourForm").on("submit", function(event) {
    enableNavigation();
});

동적으로 수정 된 양식 :

preventNavigation()및 enableNavigation()필요에 따라 동적으로 형태를 변경하거나, AJAX 요청을 전송하는 버튼을 클릭하는 것과, 다른 기능에 결합 될 수있다. 폼에 숨겨진 입력 요소를 추가 하여이 작업을 수행했습니다.

<input id="dummy_input" type="hidden" />

그런 다음 사용자가 탐색하지 못하게하려면 언제든지 해당 입력에서 변경 사항을 트리거하여 preventNavigation()실행 되도록하십시오 .

function somethingThatModifiesAFormDynamically() {

    // Do something that modifies a form

    // ...
    $("#dummy_input").trigger("change");
    // ...
}

여기서 시도해보십시오 .100 % 작동합니다.

<html>
<body>
<script>
var warning = true;
window.onbeforeunload = function() {  
  if (warning) {  
    return "You have made changes on this page that you have not yet confirmed. If you navigate away from this page you will lose your unsaved changes";  
    }  
}

$('form').submit(function() {
   window.onbeforeunload = null;
});
</script>
</body>
</html>

표준 상태 상쇄 제어 할 수 있습니다 메시지를 표시하지 않고 있음을 beforeunload의 이벤트 또는 반환 값을 설정하는 null 이외의 값 . 또한 작성자는 returnValue 대신 Event.preventDefault ()를 사용해야하며 사용자에게 표시되는 메시지는 사용자 정의 할 수 없습니다 .

69.0.3497.92 현재 Chrome은 표준을 충족하지 않습니다. 그러나 버그 보고서가 제출 되었으며 검토 가 진행 중입니다. Chrome에서는 핸들러가 반환 한 값이 아니라 이벤트 객체를 참조하여 returnValue를 설정해야합니다.

변경 여부를 추적하는 것은 저자의 책임입니다. 변수를 사용하거나 필요한 경우에만 이벤트가 처리되도록 할 수 있습니다.

window.addEventListener('beforeunload', function (e) {
    // Cancel the event as stated by the standard.
    e.preventDefault();
    // Chrome requires returnValue to be set.
    e.returnValue = '';
});
    
window.location = 'about:blank';

사용자가 양식을 변경하기 시작하면 부울 플래그가 설정됩니다. 그런 다음 사용자가 페이지에서 벗어나려고하면 window.onunload 이벤트 에서 해당 플래그를 확인합니다 . 플래그가 설정되면 메시지를 문자열로 반환하여 메시지를 표시합니다. 메시지를 문자열로 반환하면 메시지가 포함 된 확인 대화 상자가 나타납니다.

변경 사항을 커밋하기 위해 ajax를 사용하는 경우 변경 사항이 커밋 된 false후 (즉, ajax 성공 이벤트)로 플래그를 설정할 수 있습니다 .

onchangeJS에서 변수를 설정하는 텍스트 영역 (또는 다른 필드)에 이벤트를 추가 할 수 있습니다 . 사용자가 페이지를 닫으려고하면 (window.onunload) 해당 변수의 값을 확인하고 이에 따라 경고를 표시합니다.

이 스레드의 모든 답변을 바탕으로 다음 코드를 작성했으며 저에게 효과적이었습니다.

onunload 이벤트를 확인해야하는 일부 입력 / 텍스트 영역 태그 만있는 경우 HTML5 데이터 속성을 다음과 같이 지정할 수 있습니다. data-onunload="true"

예를 들어.

<input type="text" data-onunload="true" />
<textarea data-onunload="true"></textarea>

Javascript (jQuery)는 다음과 같습니다.

$(document).ready(function(){
    window.onbeforeunload = function(e) {
        var returnFlag = false;
        $('textarea, input').each(function(){
            if($(this).attr('data-onunload') == 'true' && $(this).val() != '')
                returnFlag = true;
        });

        if(returnFlag)
            return "Sure you want to leave?";   
    };
});

여기 내 HTML입니다

<!DOCTYPE HMTL>
<meta charset="UTF-8">
<html>
<head>
<title>Home</title>
<script type="text/javascript" src="script.js"></script>
</head>

 <body onload="myFunction()">
    <h1 id="belong">
        Welcome To My Home
    </h1>
    <p>
        <a id="replaceME" onclick="myFunction2(event)" href="https://www.ccis.edu">I am a student at Columbia College of Missouri.</a>
    </p>
</body>

그래서 이것은 자바 스크립트에서 비슷한 것을 수행 한 방법입니다

var myGlobalNameHolder ="";

function myFunction(){
var myString = prompt("Enter a name", "Name Goes Here");
    myGlobalNameHolder = myString;
    if (myString != null) {
        document.getElementById("replaceME").innerHTML =
        "Hello " + myString + ". Welcome to my site";

        document.getElementById("belong").innerHTML =
        "A place you belong";
    }   
}

// create a function to pass our event too
function myFunction2(event) {   
// variable to make our event short and sweet
var x=window.onbeforeunload;
// logic to make the confirm and alert boxes
if (confirm("Are you sure you want to leave my page?") == true) {
    x = alert("Thank you " + myGlobalNameHolder + " for visiting!");
}
}

TextArea의 onChange 이벤트 에서 ChangeFlag 를 true 로 설정하면 쉽게 수행 할 수 있습니다 . javascript를 사용 하여 ChangeFlag 값을 기반으로 확인 대화 상자 를 표시하십시오 . 경우 요청 된 페이지의 형태와 탐색을 폐기 확인이 true를 돌려주는 사람, 하지 않는다 - 아무것도 .

사용하려는 것은 JavaScript의 onunload 이벤트입니다.

예를 들면 다음과 같습니다. http://www.w3schools.com/jsref/event_onunload.asp

body 태그에는 "onunload"매개 변수가 있으며 여기에서 javascript 함수를 호출 할 수 있습니다. false를 리턴하면 내비게이션을 방지합니다.