Перехватить событие выхода из страницы

Question

При редактировании страницы в моей системе пользователь может решить перейти на другой веб-сайт и при этом может потерять все изменения, которые он не сохранил.

Я хотел бы перехватить любую попытку перейти на другую страницу и предложить пользователю убедиться, что он хочет, чтобы это произошло, поскольку он потенциально может потерять свою текущую работу.

Gmail делает это очень похожим образом. Например, создайте новое электронное письмо, начните вводить текст сообщения и введите новое местоположение в адресной строке (например, twitter.com или что-то в этом роде). Он спросит: "Вы уверены?"

Идеи, как повторить это? Я ориентируюсь на IE8, но хотел бы также быть совместимым с FF и Chrome.

Answer 1

Аналогично ответу 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;
};

Answer 2

Смотрите эту статью. Функция, которую вы ищете - 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>

Answer 3

Вместо всплывающего всплывающего окна с подтверждением было бы неплохо отложить немного (в считанные миллисекунды) для успешной отправки несохраненных данных на сервер, что я и сделал для своего сайта, используя фиктивный текст в консоли, например так:

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

Answer 4

У меня есть пользователи, которые не заполняли все необходимые данные.

<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>