Tupale

Ventana de confirmacion al salir de una pagina en javascript

Este tip lo publico simplemente porque pase horas en la busqueda de algo asi y no lo encontre finalmente, con las uñas y sin mucho entendiemiento de Javascript logre esto que me ha funcionado de maravilla en muchisimos navegadoras.

Para comenzar lo que queremos exactamente es crear un alert al cerrar o abandonar una pagina, este alert debe confirmar si el usuario desea realmente salir o quedarse en la pagina actual, igual que lo hace wordpress cuando estas editando un post y te vas sin guardar. xD

Este es el ejemplo de la ventana alert creada con estejavascript.

Confirmacion de javascript

Confirmacion de javascript 

El codigo javascript  es muy sensillo, simplemente tienes que usar la funcion onbeforeunload y ejecutar algun tipo de funcion de confirmacion.

Codigo javascript ventana de confirmacion al cerrar pagina:

<script type="text/javascript">
window.onbeforeunload = function exitAlert()
	{
	var textillo = "Los datos que no se han guardado se perderan.";
	return textillo;
	}
</script>

El objetivo de hacer este javascript es para un script mucho mas grande en el que estoy trabajando que publicare mas adelante.

16 comments for “Ventana de confirmacion al salir de una pagina en javascript

  1. 26 marzo, 2010 at 2:36 PM

    Me ayudaste pana gracias

  2. 9 abril, 2010 at 10:14 PM

    NO FALTA LA GUEVA DEL ADMINISTRADOR, LE ESTAN DICIENDO QUE MUCHAS GRACIAS Y EL NISIKIERA SABE PORUQE.

  3. Isaac Osaka
    17 enero, 2012 at 11:54 PM

    Muy buena bro , pero en caso de una pagina donde uses lenguajes del lado de servbidor, me parece que se ejecutaria en cada postback, yo lo intente asi y eso hacia

  4. Alex
    9 octubre, 2012 at 3:19 PM

    No funciona muy bien ya que se ejecuta cada vez que se recargue la pagina 🙁

    • 9 octubre, 2012 at 9:58 PM

      Para solucionar esto se puede simplemente poner una condicional if para determinar si la pagina a la que se dirige es la misma en tal caso no haga nada aunque si estas llenando un formulario y actualizas la pagina en algunos navegadores los datos se borran.

      • 17 abril, 2013 at 4:27 PM

        como hago para a que pagina se va a direccionar

        • 14 agosto, 2013 at 11:01 AM

          Este no funciona para redirigir o direccionar paginas, este method como:

          window.onunload = function(){ alert(‘va a salir de la web’); };

          solo son podriamos decir unos handlers del evento de cuando se sale de la pagina, solo como no estan certificados estos metodos no hay mucha informacion y no todos los exploradores lo ejecutan.

          Ejemplo, safari y chrome no interpretan el comando onunload pero chrome si entiende onbeforeunload pero no sera ejecutado si este contiene una funcion de alerta (alert(‘mensaje’);) asi que si como dice el autor quieres en chrome y otros exploradores que salga un mensaje de alerta cuando sales de su pagina utiliza ese metodo, pero siempre saldra el mensaje siempre y cuando tenga un string de return.

          en Firefox y IE si funciona onunload y tmb funciona onbeforeunload asi que como dice el autor es mas recomendable utilizar este ultimo solo q si quieres q ejecute una funcion sin q salga el mensaje no lo podras hacer ya que necesita un return para funcionar.

          el por que de esto del return es por q el explorador al hacer la salida de la pagina lo haria inmediatamente sin dar tiempo de ejecutar la funcion deseada asi que con el return espera hasta q exista un valor devuelto o de fin para poder continuar con la salida de la pagina.

          espero haber sido claro y ayudado en este post sin mucha informacion y algo noob pero super funcional y gracias por autores que publiquen esta informacion solo q dediquenle un poco mas de tiempo.

          gracias 🙂

      • 2 enero, 2015 at 4:20 PM

        Como arias ese condicional?

  5. Jorge
    30 octubre, 2014 at 2:51 PM

    Gracias canijo. Me has sacado de un apuro.

  6. LOL
    13 enero, 2015 at 12:32 PM

    es posible reemplazar el texto de los botones “Abandonar esta pagina” “Permanecer en la pagina” en Aceptar o Cancelar?

  7. 5 febrero, 2015 at 10:26 AM

    Alguien sabría como incluir una imagen? sería para una tienda online e incluirlo en la pagina del carrito, ofreciéndole un cupón descuento, antes de que abandone la compra.

    • 6 febrero, 2015 at 4:13 PM

      window.onunload=function(){};
      window.onbeforeunload = function(){};

      Utiliza esos manejadores de eventos los dos! y ya en function crea la función q se tiene q hacer o tienes pensado hacer.

  8. 4 diciembre, 2015 at 7:49 PM

    como condicionar esa salida por ejemplo si un input es =8 y otro es input es =8 puede salir de lo contarrio deve quedarse

  9. Marce
    29 abril, 2016 at 9:12 AM

    Como se puede hacer para que cuando el usuario seleccione ‘Abandonar esta pagina’ se redireccione a una pagina especifica?

    • 29 julio, 2016 at 5:50 PM

      Usando el mismo codigo pero en lugar de generar un alert generas un window.location

Deja un comentario

A %d blogueros les gusta esto: