Cuando desarrollamos aplicaciones Web, es una tarea habitual que nos interese prevenir que el usuario cierre la ventana actual antes de haberse realizado determinado proceso.
Para ello contamos con el evento OnBeforeUnload, que tanto en Internet Explorer como en Firefox (aunque no en Opera), se ejecuta antes de que la página actual se descargue. El proceso de descarga, se dispara tanto porque se cierre la ventana que la contiene, como porque se transfiera el flujo de navegación a otra.
Su mecanismo es sencillo, si se retorna una cadena de caracteres, la cadena de caracteres será incluída en el diálogo que presentará el navegador solicitando al usuario que confirme el abandono de la página. En caso contrario, no se hace nada.
El siguiente código, captura el evento de pulsación de teclas OnKeyPress, para considerar que el contenido de la página se ha modificado en este caso, e inicializa la variable de cambios a falso inicialmente con el evento OnLoad.
Posteriormente OnBeforeUnload, comprueba el valor de la variable booleana que indica si ha habido cambios o no, retornando un string o nada, según toque.
El código completo es así:
<html>
<head>
<title>Confirmación de salida</title>
</head>
<body onload="javascript:gbChanged=false;" onbeforeunload="javascript:if (gbChanged) { return('Si sale sin grabar los cambios, las modificaciones realizadas se perderán.'); }" onkeypress="javascript:gbChanged=true;">
Para salir pulsa <a href="https://www.javiergutierrezchamorro.com">aquí</a> o simplemente cierra esta ventana.
</body>
</html>
Desde aquí puedes descargar y ver en acción (1 Kb en formato HTML) el código anterior.
Actualizado a viernes 15 de febrero de 2007. 17:19:
Cuando mencionaba Firefox como compatible con OnBeforeUnload, fue probado con la versión 3.0b3pre, aunque de acuerdo al comentario de Baxter, en la 2.0.0.11, no se soporta.
En ese caso Blaxter, te agradará saber que Firefox 3, si que lo soporta, al menos con la versión que yo tengo 3.0b3pre (Gecko 1.9v3pre 20080118).
De hecho el WIP, así lo confirma también.