페이지 종료 이벤트 차단

내 시스템 내에서 페이지를 편집 할 때 사용자가 다른 웹 사이트로 이동하기로 결정할 수 있으며 그렇게하면 저장하지 않은 모든 편집 내용이 손실 될 수 있습니다.

다른 페이지로 이동하려는 모든 시도를 가로 채고 사용자가 현재 작업을 잃을 수 있으므로 이런 일이 발생하기를 원하는지 확인하고 싶습니다.

Gmail은이 작업을 매우 유사한 방식으로 수행합니다. 예를 들어 새 이메일을 작성하고 메시지 본문에 입력을 시작하고 주소 표시 줄에 새 위치를 입력합니다 (예 : twitter.com 또는 기타). "확실합니까?"라는 메시지가 표시됩니다.

이것을 복제하는 방법에 대한 아이디어? IE8을 타겟팅하고 있지만 FF 및 Chrome 과도 호환되고 싶습니다.

Ghommey의 답변과 비슷하지만 IE 및 Firefox의 이전 버전도 지원합니다.

window.onbeforeunload = function (e) {
  var message = "Your confirmation message goes here.",
  e = e || window.event;
  // For IE and Firefox
  if (e) {
    e.returnValue = message;
  }

  // For Safari
  return message;
};

이 기사를 참조하십시오. 당신이 찾고있는 기능은 onbeforeunload입니다.

샘플 코드 :

  <script language="JavaScript">
  window.onbeforeunload = confirmExit;
  function confirmExit()
  {
    return "You have attempted to leave this page.  If you have made any changes to the fields without clicking the Save button, your changes will be lost.  Are you sure you want to exit this page?";
  }
</script>

성가신 확인 팝업 대신 저장되지 않은 데이터를 서버에 성공적으로 게시하기 위해 약간 (밀리 초 단위) 만 남겨 두는 것이 좋을 것입니다 . 서버에 다음과 같이 더미 텍스트를 작성하여 내 사이트를 관리했습니다.

window.onbeforeunload=function(e){
  // only take action (iterate) if my SCHEDULED_REQUEST object contains data        
  for (var key in SCHEDULED_REQUEST){   
    postRequest(SCHEDULED_REQUEST); // post and empty SCHEDULED_REQUEST object
    for (var i=0;i<1000;i++){
      // do something unnoticable but time consuming like writing a lot to console
      console.log('buying some time to finish saving data'); 
    };
    break;
  };
}; // no return string --> user will leave as normal but data is send to server

편집 : Synchronous_AJAX 및 jquery 로 수행하는 방법 참조

필요한 모든 데이터를 작성하지 않은 사용자가 있습니다.

<cfset unloadCheck=0>//a ColdFusion precheck in my page generation to see if unload check is needed
var erMsg="";
$(document).ready(function(){
<cfif q.myData eq "">
    <cfset unloadCheck=1>
    $("#myInput").change(function(){
        verify(); //function elsewhere that checks all fields and populates erMsg with error messages for any fail(s)
        if(erMsg=="") window.onbeforeunload = null; //all OK so let them pass
        else window.onbeforeunload = confirmExit(); //borrowed from Jantimon above;
    });
});
<cfif unloadCheck><!--- if any are outstanding, set the error message and the unload alert --->
    verify();
    window.onbeforeunload = confirmExit;
    function confirmExit() {return "Data is incomplete for this Case:"+erMsg;}
</cfif>