사용자가 실수로 저장하지 않은 페이지를 탐색하지 못하도록 방지

Question

this SO 게시물에서 아래 스 니펫을 얻었으며 사용자가 페이지를 다시로드하거나 브라우저를 닫을 때 작동하지만 사용자가 링크를 클릭하면 그때 그들은 순식간에 잘못된 페이지에 메시지를 표시하기 시작합니다. 링크에 pjax를 사용하고 있습니다.

$(document).ready(function() { 
     $('textarea').change(function() { 
      window.onbeforeunload = function() { return "Your changes to the survey have not been saved?" }; 
     }); 
    }); 

Answer 1

어떨까요? <a> 링크를 모두 듣고 변수 needToSave가 true로 설정되어 있는지 여부, 메시지 표시 여부 또는 이동 여부에 따라 달라집니다.

var needToSave = false; // Set this to true on some change 
// listen on all <a ...> clicks 
$(document).click("a", function(event){   
    if (needToSave == true) { 
     alert("You need to save first"); 
     event.preventDefault(); 
     return; 
    } 
}); 

UPDATE (볶은의 제안 당)이 기존 논리 unload 이벤트에게 링크를 클릭 할 때마다 트리거 및 수행해야합니다 : 여기

// listen on all <a ...> clicks 
$(document).click("a", function(event){   
    $(window).trigger("unload"); 
}); 

jsFiddle - http://jsfiddle.net/k2fYM/

Answer 2

당신을 무조건 다음과 같이 onbeforeunload을 사용해야합니다.

<script type="text/javascript"> 
saved=true; // initially, it is saved (no action has been done) 

window.onbeforeunload = confirmExit; 
function confirmExit() { 
    if (!saved) { 
     return "You did not save, do you want to do it now?"; 
    } 
} 
</script> 

다른 이벤트가 발생하는 경우에만이 이벤트를 처리하는 것이 안전하지 않습니다. 여기에서 텍스트 영역의 onchange 이벤트는 링크를 클릭하기 전에 실행되지 않으므로 창에서 onbeforeunload을 전혀 처리하지 못합니다. 링크가 예상대로 작동합니다. 리디렉션됩니다.

사용자가 실제로 뭔가를 입력 할 때 saved 플래그를 처리하려면, 예를 들어, 텍스트 영역에서 무슨 일을들을 수 있습니다 : 다음

$('textarea').keyup(function(){ 
    saved=false; 
}); 

당신이 아약스의 데이터를 저장하는 경우,의 true로 다시 설정할 수 저장 버튼 :

$('#btnSave').click(function(){ 
    // ajax save 
    saved=true; 
}); 

그렇지 않으면에 saved 플래그를 사용하여 다음 페이지를로드합니다.