Desactivar el botón de retroceso del navegador

98

¿Cómo deshabilitar el botón ATRÁS del navegador (en todos los navegadores)?

asp.net javascript priyanka.sarkar
fuente

92

No eres propietario de las computadoras de tus usuarios ni de sus navegadores.

Instance Hunter

47

+1 Porque aunque estoy de acuerdo en que deshabilitar el botón de retroceso del navegador es una 'mala práctica', no veo ninguna razón para rechazar la pregunta en sí, responder y explicar por qué es el camino a seguir.

ChristopheD

45

¿Por qué somos hostiles a esta pregunta? Por lo que sabemos, la persona que hace esta pregunta ya sabe que esta es una mala práctica de usabilidad, pero solo está siguiendo los requisitos, o tal vez solo quiere aprender algo. ¿Por qué no pretendemos que se trata de una pregunta hipotética y respondemos cómo lo haríamos si hiciéramos ese tipo de cosas?

thomasrutter

5

Algunas cosas nunca deben hacerse, independientemente de cualquier deseo de hacerlas. Tener un requisito no negociable para esto dice instantáneamente que los requisitos fueron establecidos por personas sin negocios que los establecieron, lo cual es un problema mucho mayor.

Annakata

37

uf, fui el autor del comentario más asombroso de todos los tiempos, pero lo perdí cuando accidentalmente presioné el botón Atrás.

Dan Williams

26

Esta pregunta es muy similar a este uno ...

Necesita forzar la caducidad de la caché para que esto funcione. Coloque el siguiente código en el código de su página detrás.

Page.Response.Cache.SetCacheability(HttpCacheability.NoCache)

RSolberg
fuente

14

Tenga en cuenta que hacer que la página no se pueda almacenar en caché no logra lo que el OP quería: deshabilitar las páginas de visita con el botón Atrás. Incluso si un navegador obedece a la ausencia de caché cuando usa el botón Atrás (que los navegadores no están obligados a hacer AFAIK), todavía proporcionan una forma de recargar esa página (generalmente después de mostrar un cuadro de diálogo de advertencia). Entonces, si realmente no desea que sus usuarios regresen a esa página, esto puede ser peor, ya que la solicitud de esa página TIENE que llegar hasta el servidor de origen. Necesitará algo del lado del servidor para detectar que la página ha sido revisada. Los encabezados se pueden ignorar.

thomasrutter

60

No desactive el comportamiento esperado del navegador.

Haga que sus páginas manejen la posibilidad de que los usuarios retrocedan una página o dos; no intente inutilizar su software.

Jonathan Fingland
fuente

6

Gracias amigo, la cosa es que si está creando una aplicación AJAX, la compensación de costo-beneficio entre deshabilitar el botón de retroceso, o revisar su aplicación y trabajar en la acción de retroceso apropiada para todos y cada uno de los escenarios posibles, puede tender a deshabilitar siendo el botón de retroceso la opción más atractiva de las dos.

david.barkhuizen

Estoy de acuerdo con Jonathan, especialmente con la avalancha de anuncios de malware de redireccionamiento que actualmente están inundando Internet, ya que abusan del sistema de alerta para dificultar el abandono de sus páginas sin darles la capacidad de bloquearlo en su página

MikeT

46

Se me ocurrió un pequeño truco que desactiva el botón de retroceso usando JavaScript. Lo verifiqué en Chrome 10, Firefox 3.6 e IE9:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<title>Untitled Page</title>
<script type = "text/javascript" >
function changeHashOnLoad() {
     window.location.href += "#";
     setTimeout("changeHashAgain()", "50"); 
}

function changeHashAgain() {
  window.location.href += "1";
}

var storedHash = window.location.hash;
window.setInterval(function () {
    if (window.location.hash != storedHash) {
         window.location.hash = storedHash;
    }
}, 50);


</script>
</head>
<body onload="changeHashOnLoad(); ">
Try to hit the back button!
</body>
</html>

¿Qué está haciendo?

De Comentarios:

Este script aprovecha el hecho de que los navegadores consideran lo que viene después del signo "#" en la URL como parte del historial de navegación. Lo que hace es esto: cuando se carga la página, se agrega "# 1" a la URL. Después de 50 ms, se elimina el "1". Cuando el usuario hace clic en "atrás", el navegador cambia la URL a la que era antes de que se eliminara el "1", PERO, es la misma página web, por lo que el navegador no necesita volver a cargar la página. - Yossi Shasho

Yossi Shasho
fuente

1

Parece que esta secuencia de comandos agrega "#" a la URL cuando se carga la página, y cada 50 ms, agrega un 1 a la URL.

cenizas999

6

Este script aprovecha el hecho de que los navegadores consideran lo que viene después del signo "#" en la URL como parte del historial de navegación. Lo que hace es esto: cuando se carga la página, se agrega "# 1" a la URL. Después de 50 ms, se elimina el "1". Cuando el usuario hace clic en "atrás", el navegador cambia la URL a la que era antes de que se eliminara el "1", PERO, es la misma página web, por lo que el navegador no necesita volver a cargar la página.

Yossi Shasho

1

tenga en cuenta que la URL cambia dos veces: solo hacemos esto para disfrazar la implementación, por lo que nadie verá que agregamos "1". Entonces, en realidad, cuando el usuario vuelve a hacer clic, la página vuelve a agregar el "# 1" por un momento y lo elimina nuevamente. Por cierto, no tiene que ser "1", puede ser cualquier cadena.

Yossi Shasho

2

El problema con esto es que la página se desplaza hacia la parte superior cada 50 ms. Si tiene un formulario mayor que la altura de la ventana, esto hará que sea imposible completar los valores del formulario.

3komma14

Muchas gracias. Esto es muy útil para una página particularmente interactiva basada en JavaScript que tengo, donde desplazarse hacia la izquierda y hacia la derecha es parte de la mecánica. Esto ayuda a eliminar el problema del gesto de desplazamiento en Mac OS X que hace que los usuarios "retrocedan" una página por accidente (todo muy fácil de hacer si ya se han desplazado hasta el final).

Iain Collins

34

Otros han adoptado el enfoque de decir "no hagas esto", pero eso no responde realmente a la pregunta del cartel. Supongamos que todos saben que esto es una mala idea, pero tenemos curiosidad por saber cómo se hace de todos modos ...

No puede deshabilitar el botón Atrás en el navegador de un usuario, pero puede hacer que su aplicación se interrumpa (muestre un mensaje de error que requiera que el usuario comience de nuevo) si el usuario regresa.

Un enfoque que he visto para hacer esto es pasar un token en cada URL dentro de la aplicación y dentro de cada formulario. El token se vuelve a generar en cada página y, una vez que el usuario carga una nueva página, se invalidan los tokens de las páginas anteriores.

Cuando el usuario carga una página, la página solo se mostrará si se le pasó el token correcto (que se le dio a todos los enlaces / formularios en la página anterior).

La aplicación de banca en línea que proporciona mi banco es así. Si usa el botón Atrás, no funcionarán más enlaces y no se podrán volver a cargar la página; en su lugar, verá un aviso que le indica que no puede regresar y que debe comenzar de nuevo.

thomasrutter
fuente

1

Mi banco adopta un enfoque diferente: termina la sesión por completo. Usar el botón de retroceso es equivalente a cerrar la sesión.

RobG

Suena como el mismo enfoque. Están detectando que ha regresado y ha presentado una condición de error.

thomasrutter

Joomla también trabaja en torno a la solución de token, se genera un token en cada página y en cada formulario, de hecho, hay algunos problemas con esta práctica, como "cuando un usuario permanece demasiado tiempo en una página y su token caduca"

Matteo Bononi 'peorthyr'

1

No me malinterpretes, hay MUCHOS problemas con esta práctica. No lo recomiendo, solo digo cómo se logra normalmente. Pasan tokens únicos entre páginas para detectar que no ha seguido uno de los enlaces esperados de la página anterior y luego terminan la sesión o muestran un error. Rompe el botón Atrás, rompe la navegación con pestañas, rompe los marcadores y / o los enlaces para compartir, y más, y lo que es más, realmente no resuelve ningún problema.

thomasrutter

Si el problema es que la información se pierde o ya se rompe si el usuario intenta usar el botón Atrás, entonces deshabilitar el botón Atrás sería un enfoque más deseado.

PoloHoleSet

10

Mientras yo mismo busco la respuesta, la "Mejor práctica" está ... desactualizada ... Al igual que los navegadores (en realidad, los navegadores son feos fósiles).

La solución mejor / más segura sería que los navegadores implementaran un método / solicitud donde el usuario pueda otorgar a la página la capacidad de controlar la interfaz.

¿Por qué? Porque para mi proyecto actual estoy construyendo una interfaz 100% JavaScript construida y controlada. Y los botones de retroceso no tienen lugar en mi proyecto ya que no hay cambio de página. (Es decir, muy rápido y sin parpadeos de página debido a una actualización ... ¡como una aplicación real!)

Sé por qué no existe la capacidad de "secuestrar" la interfaz, y lo entiendo. ¡Pero al menos deberíamos tener la capacidad de solicitarlo desde el navegador! Eso sería realmente la "mejor práctica" sin los peligros del highjack.

Pero los navegadores son navegadores ... No espero que suceda nada interesante a este respecto.

StellarDevil
fuente

1

100% en desacuerdo, si bien esta funcionalidad sería maravillosa para el 99% de los desarrolladores web, eso deja al 1% restante que abusaría de esta funcionalidad, es demasiado peligroso permitir que un sitio web controle su capacidad para usar Internet, en mi opinión La secuencia de comandos de redireccionamiento entre dominios debe prohibirse o permitir que se confirme si la secuencia de comandos puede ejecutarse debido a este tipo de abuso

MikeT

@MikeT - ¿Cómo deshabilitar el botón "Atrás" mientras navego en las páginas de mi aplicación específica inhibiría la capacidad de alguien para usar Internet?

PoloHoleSet

@PoloHoleSet si tiene la capacidad de deshabilitar el botón de retroceso del navegador, entonces también lo hacen todos, todo lo que necesita es una redirección para enviarlo a una página a la que no quería ir y si pueden deshabilitar sus controles de navegación en el navegador, ¿cómo te escapas? Estoy seguro de que te has encontrado con la página "tienes una página de virus" donde te piden que instales su virus para eliminar el virus que no existe. Ahora imagina ese sitio donde pueden evitar que te

vayas

@MikeT - Puedo ingresar cualquier otra URL en la ventana de navegación, puedo cerrar una pestaña, puedo deshabilitar javascript. La cuestión no es si alguien PUEDE, porque tú puedes, yo puedo, cualquiera puede. Como una cuestión de política, la gente dice que NO DEBE, si puede. No estamos hablando de cómo diseñaríamos un navegador, estamos hablando de cómo programamos una aplicación.

PoloHoleSet

@PoloHoleSet si va a bloquear la navegación, necesitará bloquear más que solo el botón Atrás, ya que el historial del navegador y las URL escritas también brindarían a los usuarios una forma de evitar su flujo de trabajo. y como dije, no estamos hablando de lo que usted o yo haríamos, sino del elemento malicioso, si la única forma de evitar que un sitio web malicioso tome el control de su navegador es deshabilitar todos los js en su navegador, entonces ha roto Internet como la web moderna se basa en scripts para proporcionar contenido, lo cual es mi punto, si desea tanto control sobre sus usuarios, cree una aplicación que sirva a su flujo de trabajo

MikeT

4

Estaba buscando la misma pregunta y encontré el siguiente código en un sitio. Pensé compartirlo aquí:

function noBack()
{
   window.history.forward()
}
noBack();
window.onload = noBack;
window.onpageshow = function(evt){ if(evt.persisted) noBack(); }
window.onunload = function(){ void(0); }

Sin embargo, como señalaron los usuarios anteriores, esta nunca es una buena práctica y debe evitarse por todas las razones.

user704988
fuente

2

Sería bueno si pudiera indicar las razones por las que debe evitarse.

Chris Snow

Según tengo entendido, técnicamente no puede deshabilitar el botón Atrás en el navegador de alguien, solo puede hacerlo para que el botón no esté disponible o continúe cargando la misma página. En lugar de hacerlo a través de JS, use el código del lado del servidor y use la lógica adecuada que no necesita usar el botón Atrás. Se debe utilizar una acción alternativa como volver a cargar la misma página o mostrar un mensaje personalizado.

user704988

2

Si confía en la tecnología del lado del cliente, puede eludirla. Javascript puede estar deshabilitado, por ejemplo. O el usuario puede ejecutar un script JS para evitar sus restricciones.

Supongo que solo puede hacer esto mediante el seguimiento del lado del servidor de la sesión del usuario y redirigiendo (como en Server.Transfer, no Response.Redirect) el usuario / navegador a la página requerida.

devio
fuente

2

<body onLoad="if(history.length>0)history.go(+1)">

Londres
fuente

2

Ha habido algunas implementaciones diferentes. Hay una solución flash y algunas soluciones iframe / frame para IE. Mira esto

http://www.contentwithstyle.co.uk/content/fixing-the-back-button-and-enabling-bookmarking-for-ajax-apps

Por cierto: hay muchas razones válidas para deshabilitar (o al menos evitar 1 paso) un botón de retroceso; mire gmail como un ejemplo que implementa la solución hash descrita en el artículo anterior.

Busque en Google "cómo ajax rompió el botón de retroceso" y encontrará muchos artículos sobre las pruebas de usuario y la validez de deshabilitar el botón de retroceso.

DallinDyer
fuente

Consulte también el nuevo visor de fotos de Facebook. Tenga en cuenta que el botón de retroceso le devuelve una foto (que es lo que desea) en lugar de

utilizar

2

También tuve el mismo problema, use esta función de script de Java en la etiqueta de la cabeza o en, está funcionando bien al 100%, no le dejaría volver.

 <script type = "text/javascript" >
      function preventBack(){window.history.forward();}
        setTimeout("preventBack()", 0);
        window.onunload=function(){null};
    </script>

Abdul Khaliq
fuente

1

Prueba este código. Trabajó para mi. Básicamente cambia el hash tan pronto como se carga la página, lo que cambia la página del historial reciente agregando "1" en la URL. Entonces, cuando presiona el botón Atrás, se redirige a la misma página cada vez.

 <script type="text/javascript">
    var storedHash = window.location.hash;
    function changeHashOnLoad() { window.location.hash = "1";}
    window.onhashchange = function () {
        window.location.hash = storedHash;
    }
</script>

<body onload="changeHashOnLoad(); ">

</bod>

P Shrestha
fuente

0

Debería utilizar publicaciones con caducidad adecuada y encabezados de almacenamiento en caché.

epascarello
fuente

Vea mi comentario sobre esta respuesta para saber por qué eso no funciona.

thomasrutter

0

En lugar de intentar desactivar el botón de retroceso del navegador, es mejor admitirlo. .NET 3.5 puede manejar muy bien los botones de retroceso (y avance) del navegador. Buscar con Google: "Scriptmanager EnableHistory". Puede controlar qué acciones del usuario agregarán una entrada al historial del navegador (ScriptManager -> AddHistoryPoint) y su aplicación ASP.NET recibe un evento cada vez que el usuario hace clic en los botones Atrás / Adelante del navegador. Esto funcionará para todos los navegadores conocidos.

Corne
fuente

0

A nivel mundial, deshabilitar el botón Atrás es una mala práctica. Pero, en ciertas situaciones, la funcionalidad del botón de retroceso no tiene sentido.

Esta es una forma de evitar la navegación no deseada entre páginas:

Página principal (archivo top.php):

<?php
    session_start();
    $_SESSION[pid]++;
    echo "top page $_SESSION[pid]";
    echo "<BR><a href='secondary.php?pid=$_SESSION[pid]'>secondary page</a>";
?>

Página secundaria (archivo secondary.php):

<?php
    session_start();
    if ($_SESSION[pid] != $_GET[pid]) 
        header("location: top.php");
    else {
        echo "secondary page $_SESSION[pid]";
        echo "<BR><a href='top.php'>top</a>";
    }
?>

El efecto es permitir navegar desde la página superior hacia adelante a la página secundaria y hacia atrás (por ejemplo, Cancelar) utilizando sus propios enlaces. Pero, después de regresar a la página superior, el botón de retroceso del navegador no puede navegar a la página secundaria.

Anono Mouser
fuente

0

Incluso me enfrenté a la misma situación antes ... y no tuve ninguna ayuda. prueba estas cosas, tal vez te funcionen

en la <head>etiqueta de la página de inicio de sesión :

<script type="text/javascript">
    window.history.forward();
</script>

en el botón Cerrar sesión hice esto:

protected void Btn_Logout_Click(object sender, EventArgs e)      
{
    connObj.Close();
    Session.Abandon();
    Session.RemoveAll();
    Session.Clear();
    HttpContext.Current.Session.Abandon();
}

y en la página de inicio de sesión he puesto el foco en el cuadro de texto Nombre de usuario como este:

protected void Page_Load(object sender, EventArgs e)
{
    _txtUsername.Focus();
}

Espero que esto ayude ... :) alguien por favor enséñeme cómo editar esta página ...

Robin
fuente

a) edite su respuesta b) haga clic en el signo de interrogación c) haga clic en ayuda avanzada d) lea y aplique :-) También tenga en cuenta que ctrl-k des / sangra el bloque seleccionado para des / formatear como código. Además, el formateador no puede manejar bien las pestañas (aunque probablemente no sea un problema aquí)

kleopatra

0

SI necesita suprimir suavemente las teclas de eliminación y retroceso en su aplicación web, para que cuando estén editando / eliminando elementos, la página no se redirija inesperadamente, puede usar este código:

window.addEventListener('keydown', function(e) {
  var key = e.keyCode || e.which;
  if (key == 8 /*BACKSPACE*/ || key == 46/*DELETE*/) {
    var len=window.location.href.length;
    if(window.location.href[len-1]!='#') window.location.href += "#";
  }
},false);

nvd_ai
fuente

0

Prueba este código. Solo necesita implementar este código en la página maestra y funcionará para usted en todas las páginas

<script type="text/javascript">
    window.onload = function () {
        noBack();
    }
    function noBack() {
        window.history.forward();
    }
</script>
<body  onpageshow="if (event.persisted) noBack();">
</body>

Suhaib Janjua
fuente

0

El problema con Yossi Shasho Código 's es que la página se desplaza a la parte superior de cada 50 ms. Así que modifiqué ese código. Ahora funciona bien en todos los navegadores modernos, IE8 y superiores

var storedHash = window.location.hash;
function changeHashOnLoad() {
    window.location.href += "#";
    setTimeout("changeHashAgain()", "50");
}

function changeHashAgain() {
    window.location.href += "1";
}

function restoreHash() {
    if (window.location.hash != storedHash) {
        window.location.hash = storedHash;
    }
}

if (window.addEventListener) {
    window.addEventListener("hashchange", function () {
        restoreHash();
    }, false);
}
else if (window.attachEvent) {
    window.attachEvent("onhashchange", function () {
        restoreHash();
    });
}
$(window).load(function () { changeHashOnLoad(); });

Vishnu TS
fuente

0

Esto parece haber funcionado para nosotros.

history.pushState(null, null, $(location).attr('href'));
window.addEventListener('popstate', function () {
    history.pushState(null, null, $(location).attr('href'));
});

jgabb
fuente

0

<script>
    $(document).ready(function() {
        function disableBack() { window.history.forward() }

        window.onload = disableBack();
        window.onpageshow = function(evt) { if (evt.persisted) disableBack() }
    });
</script>

chetan
fuente

Desactivar el botón de retroceso del navegador

Respuestas: