Evento de salida de página de interceptación

Al editar una página dentro de mi sistema, un usuario puede decidir navegar a otro sitio web y, al hacerlo, perder todas las ediciones que no ha guardado.

Me gustaría interceptar cualquier intento de ir a otra página y pedirle al usuario que se asegure de que quiere que esto suceda, ya que podría perder su trabajo actual.

Gmail hace esto de una manera muy similar. Por ejemplo, redacte un nuevo correo electrónico, comience a escribir en el cuerpo del mensaje e ingrese una nueva ubicación en la barra de direcciones (por ejemplo, twitter.com o algo). Le preguntará "¿Está seguro?"

Ideas de cómo replicar esto? Me dirijo a IE8, pero también me gustaría ser compatible con FF y Chrome.

Similar a la respuesta de Ghommey, pero esto también es compatible con versiones antiguas de IE y 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;
};

Vea este artículo. La característica que está buscando es onbeforeunload

Código de muestra:

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

En lugar de una ventana emergente de confirmación molesta, sería bueno retrasar el dejar solo un poco (cuestión de milisegundos) para administrar la publicación con éxito de los datos no guardados en el servidor, que administré para mi sitio escribiendo texto ficticio en la consola de esta manera:

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

Editar: consulte también Synchronous_AJAX y cómo hacerlo con jquery

Tengo usuarios que no han completado todos los datos requeridos.

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