Prevenir el uso del botón volver atrás del navegador

WHK · 9 Agosto 2013, 19:09 PM

Necesitaba ver de alguna manera como prevenir el uso del botón volver atrás para prevenir que un usuario de mi sistema WEB pudiera volver a llenar un mismo formulario expirado.

Para esto encontré varias soluciones pero ninguna 100% efectiva.

Una era hacer uso de cabeceras y caché haciendo que las paginas expiraran al momento pero esto provocaba que al usuario final le apareciera un mensaje de error del navegador diciendo que la página habia expirado, no era una solución muy elegante asi que decidí buscar alternativas en javascript.

Una solución era utilizar la función window.back:

Código [Seleccionar]

previene = function(){ history.go(1); };
window.back = previene();

Con esto cada ves que presionaba el botón volver el usuario era redirigido nuevamente a la página final, pero de todas maneras cargaba la pagina anterior y se veia muy feo el intercambio de paginas, la idea era que simplemente no funcionara ese botón.

Por lo cual se me ocurrió utilizar window.stop:

Código [Seleccionar]

previene = function(){ window.stop(); history.go(1); };
window.back = previene();

El problema era que igual no alcanzaba a detenerse y seguia mostrando la pagina anterior antes de redirigir al usuario. Por lo cual se me ocurrió utilizar HTML5 y sobreescribir el historial con la pagina actual, el problema es que no es soportado por Internet Explorer

Por ahi vi un código similar a este:

Código [Seleccionar]

<body onunload="history(1)">

El problema era exactamente el mismo del anterior, de hecho con body no funcionaba en algunos navegadores como firefox, pero si a traves de unload de jquery:

Código [Seleccionar]

$(windows).unload = function(){ window.stop(); history(1); return false; };

Pero, el mismo problema de siempre, no alcanzaba a detener la página anterior.

Buscando y buscando entontré una solución a medias pero efectiva:
http://es.softuses.com/6227 (répondre #8)

hacía que cada 50 milesimas de segundos cambiara la localización a traves de un hashtag haciendo que el historial quedara infinitamente sobre la misma pagina:

Código [Seleccionar]

http://pagina.com/#500
http://pagina.com/#501
http://pagina.com/#502
...

El problema es que no era una solución muy elegante porque el usuario verá en la barra del navegador como cambia infinitamente la URL y si necesita escribir una dirección no podrá.

Asi que en base a este mismo concepto armé una solución mas elegante y funcional:

Código (javascript) [Seleccionar]

$(document).ready(function(){
	
	window.onhashchange = function(){
		if (typeof (window.stop) != 'undefined')
			window.stop();
		if (typeof (document.execCommand) != 'undefined')
			document.execCommand('Stop');

		if (document.location.hash.length < 10)
			history.go(1);
	};

	/* Push 10 History */
	document.location += "#";
	for(i = 0; i < 10; i++)
		document.location += "@";
});

De esta manera cuando carga el sitio por primera ves creará un hastag con 10 arrobas creando una pila de 10 historiales sobre si mismo, cuando la localización del hash cambia al presionar el botón volver atrás inmediatamente se avanza el historial hacia el ultimo arroba agregado, de esta manera cuando el usuario intente volver atras siempre quedará sobre si mismo y no habrá un pestañeo de pagina ni de cambios ya que solo son tags y la carga se detiene, no hay cambio en el DOM a excepción del hash y el que lo manipule.

Le puse 10 hash porque pensé que talves podía haber alguien muy rapido presionando atrás con un pc demasiado lento, puede que alcance a devolverse dos arrobas como mucho pero no 10.

A mi me funciona de lujo

y lo genial es que funciona con cualquier navegador, espero que a alguien mas le sirva porque es un tema muy muy discutido en todos lados y ninguno de los que he visto ha sabido dar una solución como se debe.

saludos.

el_chente23 · 9 Agosto 2013, 19:37 PM

Una manera de hacerlo es que cuando de tu formulario redirecciones a otra pagina lo hagas de esta manera:

Código [Seleccionar]


windows.location.replace("url");

Con esto al darle al boton de back ya no encontrará la pagina de donde viene. Espero te sirva.

Saludos

WHK · 9 Agosto 2013, 19:49 PM

Ahh pero ya no sería generico y tendria que aplicarlo a varias cosas, formularios, locations desde javascript, etiquetas a, etc, es todo un lio de cambios, en cambio desde la pagina que necesito que no se vuelva hacia atras incluyo este js y listo, no altera el código ni nada del documento salvo el hash de la url pero es lo mas minimo.

Eliminé el window.stop() para que no causara problemas en la carga de documentos con imagenes o recursos que demoren en cargar. Como usa hash no afecta la carga asi que queda innecesario. También modifiqué la manera de agregar el gato ya que en paginas que ya tenia una ancla utilizada provocaba un soble hash:

Código (javascript) [Seleccionar]

$(document).ready(function(){
	
	/* Hack que previene el uso del botón volver atrás del historial ========= */
	window.onhashchange = function(){
		if (document.location.hash.length < 10)
			history.go(1);
	};

	/* Push 10 History */
	document.location = document.location.href.split('#')[0] + "#"
	for(i = 0; i < 10; i++)
		document.location += "@";
	/* ======================================================================= */

});

Edito: acabo de probar windows.location.replace() pero no funciona en firefox, redirecciona bien pero la url de procedencia del historial se mantiene igual. Talves en algún momento no funcionaba en otro navegador debido a algún bug, pero por lo menos hoy esto no funciona de la manera que se esperaba.

Igual estoy conforme con el sistema de los hash.

WHK · 9 Agosto 2013, 20:36 PM

Nueva versión

ahora todas las paginas que tengan un hash "noback" no se podran volver atrás

Ejemplo:
http://algo.com/abc/abc.php#noback

Código (javascript) [Seleccionar]

$(document).ready(function(){

	if(document.location.hash.substr(1) == 'noback'){
		/* Hack que previene el uso del botón volver atrás del historial ========= */
		window.onhashchange = function(){
			if (document.location.hash.length < 5)
				history.go(1);
		};

		/* Push 10 History */
		document.location = document.location.href.split('#')[0] + "#"
		for(i = 0; i < 4; i++)
			document.location += "!";
		/* ======================================================================= */
	}

});

Con esto ya no es necesario integrar el archivo javascript en cada sección, solamente se agrega al theme y listo! También cambié la arroba por exclamación para que no se vea tan fea la URL, ahora se ve mas bonita y ordenada

y ajustó los 10 historiales en ves de 11 contando el historial cero.

Test Foro de elhacker.net SMF 2.1

Prevenir el uso del botón volver atrás del navegador

WHK

el_chente23

WHK

WHK