jQuery UI 대화 상자 onbeforeunload

Question

작은 문제가 있습니다. 나는 창의 onunload 이벤트를 잡고 확인 질문을하려고 시도하고 있으며 사용자가 잘 지내기를 결정한 경우, 페이지를 떠나려면 모든 데이터를 잃어 버릴 것입니다. 여기에 문제가 있습니다 ...

jQuery UI 대화 상자를 사용하고 있으며 페이지에 다음 코드를 넣을 때 대화 상자가 열려 있고 브라우저에서 뒤로 버튼을 클릭하면 Msgbox가 나타나지 않습니다. 페이지를 새로 고칩니다.

<script type="text/javascript"> 
    $(window).bind('beforeunload', function() { 
            alert('you are an idiot!'); 
        } 
    );
</script>

그리고 내가 사용하는 솔루션은 게시물이었습니다 여기. 다시 말하지만, jQuery UI 대화 상자가 열려 있지 않으면 Msgbox가 잘 표시됩니다. 내가 그렇게한다면, 그것은 msgbox를 표시하지 않고 페이지를 새로 고침합니다.

어떤 아이디어?

Answer 1

경고를 표시하는 올바른 방법은 단순히 문자열을 반환하는 것입니다. 전화하지 마십시오 alert() 스스로 방법.

<script type="text/javascript">
    $(window).on('beforeunload', function() {
        if (iWantTo) {
            return 'you are an idiot!';
        }
    }); 
</script>

또한보십시오: https://developer.mozilla.org/en-us/docs/web/events/beforeunload

Answer 2

특정 양식을 제출함으로써 페이지를 떠나는 예외를 만들 수도 있습니다.

$(window).bind('beforeunload', function(){
    return "Do you really want to leave now?";
});

$("#form_id").submit(function(){
    $(window).unbind("beforeunload");
});

Answer 3

이것은 나를 위해 작동합니다

$(window).bind('beforeunload', function() {
      return 'Do you really want to leave?' ;
});

Answer 4

jQuery API는 구체적으로 전후에 바인딩하지 말고 대신 창에 직접 바인딩해야한다고 말합니다.

Answer 5

이것은 나를 위해 작동합니다 :

window.addEventListener("beforeunload", function(event) {
  event.returnValue = "You may have unsaved Data";
});

Answer 6

ASP.NET MVC의 경우 특정 양식을 제출함으로써 페이지를 떠나는 예외를 만들려면 :

양식 ID 설정 :

@using (Html.BeginForm("Create", "MgtJob", FormMethod.Post, new { id = "createjob" }))
{
  // Your code
}



<script type="text/javascript">

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

    // this will call before submit; and it will unbind beforeunload
    $(function () {
        $("#createjob").submit(function (event) {
            $(window).unbind("beforeunload");
        });
    });

</script>