En este artículo, discutiremos cómo escribir una función javascript que evitará que el usuario navegue de regreso a la última página o a la anterior. Hay tantas formas de detener el botón Atrás del navegador más populares y funcionarán en todas las condiciones. Puede agregar código a la primera página o a la anterior para obligar al navegador a avanzar una y otra vez, de modo que cuando el usuario intente volver a la página anterior, el navegador lo lleve nuevamente a la misma.
Esto se puede hacer creando funciones personalizadas como esta:
Ejemplo 1:
- Código 1: guarde este archivo como Login.html para la primera página.
html
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>
Blocking Back Button
using javascript
</
title
>
<
style
type
=
"text/css"
>
body {
font-family:Arial;
color:green;
}
</
style
>
<
script
type
=
"text/javascript"
>
window.history.forward();
function noBack() {
window.history.forward();
}
</
script
>
</
head
>
<
body
>
<
h1
>GeeksforGeeks</
h2
>
<
p
>
Click here to Goto
<
a
href
=
"b.html"
>
Link to second page
</
a
>
</
p
>
</
body
>
</
html
>
- Código 2: guarde este archivo como b.html para la segunda página.
html
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>
Blocking Back Button
using javascript
</
title
>
</
head
>
<
body
>
<
h3
>This is second page</
h3
>
<
p
>
On this page, back button
functionality is disabled.
</
p
>
</
body
>
</
html
>
- Producción:
Ejemplo 2:
- Código 1: guarde este archivo como .html para la primera página.
html
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>First Page</
title
>
<
script
type
=
"text/javascript"
>
function preventBack() {
window.history.forward();
}
setTimeout("preventBack()", 0);
window.onunload = function() { null };
</
script
>
</
head
>
<
body
>
<
h3
>This is first page</
h3
>
<
hr
/>
<
a
href
=
"b.html"
>Goto second Page</
a
>
</
body
>
</
html
>
- Código 2: guarde este archivo como b.html para la segunda página.
html
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>Second Page</
title
>
</
head
>
<
body
>
<
h3
>
Second Page - Back Button
is disabled here.
</
h3
>
<
hr
/>
</
body
>
</
html
>
- Producción: