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