Mientras trabajamos con algunos proyectos relacionados con la privacidad, debemos asegurarnos de que nuestra programación no tenga ningún tipo de lagunas. En este artículo veremos cómo podemos desactivar el botón Atrás del navegador de forma intencionada para que los usuarios no puedan volver atrás y acceder al contenido. Tenemos muchos escenarios en los que podríamos usar este tipo de funcionalidad.
Por ejemplo, en las páginas de las pasarelas de pago, podemos deshabilitar el botón Atrás para que, si el usuario hace clic involuntariamente en el botón Atrás, el pago no se cancele. Para implementar esta función en nuestra página, alternaremos entre dos páginas y luego restringiremos a los usuarios para que regresen a la primera página.
Ejemplo: Cree dos archivos HTML en la misma carpeta que usamos page1.html y page2.html . En page1.html, agregue el siguiente código.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Disabling browser back button</title>
<script src=
"https://code.jquery.com/jquery-3.6.0.min.js"
integrity=
"sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous">
</script>
</head>
<body>
<a href="test2.html">Next page</a>
<script>
$(document).ready(function() {
function disableBack() {
window.history.forward()
}
window.onload = disableBack();
window.onpageshow = function(e) {
if (e.persisted)
disableBack();
}
});
</script>
</body>
</html>
En la segunda página, page2.html agregue el siguiente código. La segunda página podría ser cualquier cosa, la primera página es importante porque estamos usando el guión en la primera página.
test2.html
<!DOCTYPE html> <html> <body> Click on back button of browser or use the backspace key on keyboard. </body> </html>
Producción:
También puede bloquear el botón Atrás del navegador usando Vanilla JavaScript para eso puede seguir este artículo Cómo detener el botón Atrás del navegador usando JavaScript .