• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

181
Vistas
Botón Atrás: pregunta al usuario si quiere salir

Tengo una aplicación con un botón. Si un usuario hace clic en el botón, aparece una capa con texto.

También hay un

history.pushState()

para captar el evento "Botón Atrás".

Si el usuario hace clic en "atrás" en su navegador, se le debe preguntar si realmente quiere irse. Y si ella lo confirma, la capa debería desaparecer y el historial.estado debería establecerse en back() (o eliminarse).

De lo contrario, no debería haber ningún cambio en el historial del navegador.

Intenté usar el detector de eventos befureonload pero no tuvo ningún efecto... (no es sorprendente que un cambio de estado probablemente no sea un evento de descarga).

Este es mi bolígrafo: https://codepen.io/kili123/pen/QWqzjvN

Agradecería cualquier ayuda y sugerencia!

 window.addEventListener("beforeunload",function() { alert("Wirklich verlassen?") }) let button = document.querySelector("#button") button.addEventListener("click",function() { history.pushState({action: 'show_calendar'}, "Layer"); let layer = document.querySelector("#layer") layer.classList.remove("hidden") })
 #layer { background:#ddd; padding:2em; } .hidden { display:none; }
 <button id="button">Click me</button> <div id="layer" class="hidden"> Hello here i am. If you press "back" in your browser there should be a confirmation if you really want to close.</div>

almost 3 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Puede probar el controlador de eventos popstate, por ejemplo:

 window.addEventListener('popstate', function(event) { // The popstate event is fired each time when the current history entry changes. var r = confirm("You pressed a Back button! Are you sure?!"); if (r == true) { // Call Back button programmatically as per user confirmation. history.back(); // Uncomment below line to redirect to the previous page instead. // window.location = document.referrer // Note: IE11 is not supporting this. } else { // Stay on the current page. history.pushState(null, null, window.location.pathname); } history.pushState(null, null, window.location.pathname); }, false);

Nota: Para obtener los mejores resultados, debe cargar este código solo en páginas específicas en las que desea implementar la lógica para evitar otros problemas inesperados.

almost 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda