Подія перехоплення сторінки перехоплення

Під час редагування сторінки в моїй системі користувач може вирішити перейти на інший веб-сайт, і таким чином може втратити всі зміни, які вони не зберегли.

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

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

Дивіться цю статтю. Шукаєте, що ви шукаєте - це передзавантаження

зразок коду:

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