¿Cómo puedo detener el botón Atrás del navegador usando JavaScript?

Estoy haciendo una aplicación de prueba en línea en PHP. Quiero impedir que el usuario regrese a un examen.

Probé el siguiente script, pero detiene mi temporizador.

¿Qué tengo que hacer?

El temporizador se almacena en el archivo cdtimer.js .

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

<body onLoad="noBack();" onpageshow="if (event.persisted) noBack();" onUnload="">

Tengo el cronómetro de exámenes que toma la duración del examen a partir de un valor de MySQL. El temporizador comienza en consecuencia, pero se detiene cuando introduzco el código para desactivar el botón Atrás. ¿Cuál es mi problema?

Sep 12 '12 12:09 Sawant Akshay

Existen numerosas razones por las que desactivar el botón Atrás realmente no funcionará. Lo mejor que puede hacer es advertir al usuario:

window.onbeforeunload = function() { return "Your work will be lost."; };

Esta página enumera varias formas en las que puede intentar desactivar el botón Atrás, pero ninguna está garantizada:

http://www.irt.org/script/311.htm

Sep 12 '2012 05:09 ColinE

Generalmente es una mala idea anular el comportamiento predeterminado del navegador web. Un script del lado del cliente no tiene privilegios suficientes para hacer esto por razones de seguridad.

También se hacen algunas preguntas similares,

¿Cómo puedo evitar que la tecla de retroceso retroceda?
¿Cómo puedo evitar la acción de retroceso predeterminada del navegador para el botón de retroceso con JavaScript?

En realidad , no se puede desactivar el botón Atrás del navegador. Sin embargo, puedes hacer magia usando tu lógica para evitar que el usuario vuelva a navegar, lo que creará la impresión de que está deshabilitado. Así es como: consulte el siguiente fragmento.

(function (global) {

    if(typeof (global) === "undefined") {
        throw new Error("window is undefined");
    }

    var _hash = "!";
    var noBackPlease = function () {
        global.location.href += "#";

        // Making sure we have the fruit available for juice (^__^)
        global.setTimeout(function () {
            global.location.href += "!";
        }, 50);
    };

    global.onhashchange = function () {
        if (global.location.hash !== _hash) {
            global.location.hash = _hash;
        }
    };

    global.onload = function () {
        noBackPlease();

        // Disables backspace on page except on input fields and textarea..
        document.body.onkeydown = function (e) {
            var elm = e.target.nodeName.toLowerCase();
            if (e.which === 8 && (elm !== 'input' && elm  !== 'textarea')) {
                e.preventDefault();
            }
            // Stopping the event bubbling up the DOM tree...
            e.stopPropagation();
        };
    }
})(window);

Esto está en JavaScript puro, por lo que funcionaría en la mayoría de los navegadores. También desactivaría la tecla de retroceso , pero esa tecla funcionará normalmente dentro de inputlos campos y textarea.

Configuración recomendada:

Coloque este fragmento en un script separado e inclúyalo en una página donde desee este comportamiento. En la configuración actual, ejecutará el onloadevento del DOM, que es el punto de entrada ideal para este código.

¡DEMOSTRACIÓN funcionando!

Fue probado y verificado en los siguientes navegadores,

Cromo.
Firefox.
Internet Explorer (8-11) y Edge.
Safari.

Sep 12 '2012 05:09 Rohit416

Me encontré con esto y necesitaba una solución que funcionara correctamente y "bien" en una variedad de navegadores, incluido Mobile Safari (iOS 9 en el momento de la publicación). Ninguna de las soluciones era del todo correcta. Ofrezco lo siguiente (probado en Internet Explorer 11, Firefox, Chrome y Safari):

history.pushState(null, document.title, location.href);
window.addEventListener('popstate', function (event)
{
  history.pushState(null, document.title, location.href);
});

Tenga en cuenta lo siguiente:

history.forward()(mi antigua solución) no funciona en Mobile Safari --- parece no hacer nada (es decir, el usuario aún puede regresar). history.pushState()funciona en todos ellos.
el tercer argumento history.pushState()es una URL . Soluciones que pasan una cadena como 'no-back-button'o 'pagename'parecen funcionar bien, hasta que intenta actualizar/recargar la página, momento en el que se genera un error de "Página no encontrada" cuando el navegador intenta localizar una página con esa URL. (También es probable que el navegador incluya esa cadena en la barra de direcciones cuando esté en la página, lo cual es feo). location.hrefdebe usarse para la URL.
el segundo argumento history.pushState()es un título . Al buscar en la web, la mayoría de los lugares dicen que "no se usa", y todas las soluciones aquí pasan nullpor eso. Sin embargo, al menos en Mobile Safari, eso coloca la URL de la página en el menú desplegable del historial al que puede acceder el usuario. Pero cuando agrega una entrada para una visita a una página normalmente, pone su título , lo cual es preferible. Entonces, pasar document.titlepor eso da como resultado el mismo comportamiento.

Dec 17 '2015 14:12 JonBrave

<script>
    window.location.hash = "no-back-button";

    // Again because Google Chrome doesn't insert
    // the first hash into the history
    window.location.hash = "Again-No-back-button"; 

    window.onhashchange = function(){
        window.location.hash = "no-back-button";
    }
</script>

Dec 02 '2013 05:12 vrfvr