cómo detener el botón de retroceso del navegador usando javascript

155

Estoy haciendo una aplicación de cuestionario en línea en PHP. Quiero restringir que el usuario regrese a un examen. He intentado el siguiente script pero detiene mi temporizador. ¿Qué tengo que hacer?

He incluido el código fuente. El temporizador se almacena en 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 temporizador de examen que toma una duración para el examen desde un valor mysql . El temporizador se inicia en consecuencia, pero se detiene cuando pongo el código para deshabilitar el botón Atrás. Cual es mi problema

javascript browser Sawant Akshay
fuente

para nodeJS detectar y detener el evento de botón de retroceso del navegador

Darshan Dixit

157

Existen numerosas razones por las que deshabilitar el botón Atrás no funcionará realmente. Su mejor apuesta es advertir al usuario:

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

Esta página enumera varias formas en que podría intentar deshabilitar el botón Atrás, pero ninguna está garantizada:

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

ColinE
fuente

Debe verificar su código PHP si la respuesta ya se ha enviado y, en caso afirmativo, rechazarla.

Sela Yair

44

Vale la pena mencionar que las cosas ahora han cambiado en los navegadores modernos: consulte stackoverflow.com/questions/19926641/…

devrobf

126

En general, es una mala idea anular el comportamiento predeterminado del navegador web. El script del lado del cliente no tiene el privilegio suficiente para hacerlo por razones de seguridad.

También se hacen algunas preguntas similares,

En realidad, no puede deshabilitar el botón de retroceso del navegador. Sin embargo, puede hacer magia usando su lógica para evitar que el usuario navegue hacia atrás, lo que creará una impresión de que está deshabilitado. Aquí es cómo, mira 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 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 deshabilitaría la tecla de retroceso, pero la tecla funcionará normalmente dentro de los inputcampos y textarea.

Configuración recomendada:

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

Demostración de trabajo!

Probado y verificado en los siguientes navegadores,

Cromo.
Firefox
IE (8-11) y Edge.
Safari.

Rohit416
fuente

1

No entiendo por qué setTimeout. Si solo agrego inicialmente #! a la ubicación y eliminar setTimeout, todavía funciona.

baraber

Sí, es cierto, funcionará, pero si tengo que recordar algo de la memoria cuando tuve esto en primer lugar ... el flujo no funcionaba correctamente en Chrome como en otros navegadores. Chrome devolvió el vacío location.hashinicialmente, así que me obligó a hacerlo así. Podría haber más mejoras en esto, pero 50 ms solo una vez no me costó mucho, así que lo dejo allí.

Rohit416

Oh, eso fue un desafío de memoria, gracias :) Usé su solución, pero reemplacé setInterval por el controlador .onhashchange. Funciona perfectamente. Pero tengo otra pregunta: ¿Por qué hacer "if (global.location.hash! = _Hash)"? Creo que esta condición solo puede ser verdadera todo el tiempo porque window.location.hash siempre debe devolver el hash con el carácter '#' y _hash nunca contendrá el carácter '#'. ¿Recuerdas algo sobre eso? ¿Es solo una protección en caso de que el navegador no devuelva el carácter '#' en location.hash?

baraber

Creé un archivo .js según lo recomendado e incluí el archivo js en mi código usando lo siguiente: <script src = "./ javascript / noback.js"> </script> Pero aún puedo realizar una copia de seguridad (usando Safari). ¿Qué me estoy perdiendo? Esta biblioteca se agregó de la misma manera que otras bibliotecas que uso, por lo que la inclusión es buena.

Tim

1

Bloquea el botón de retroceso en ipad air, ios 8

plugincontainer

75

Encontré esto, necesitando una solución que funcionara correctamente y "bien" en una variedad de navegadores, incluido Mobile Safari (iOS9 en el momento de la publicación). Ninguna de las soluciones era correcta. Ofrezco lo siguiente (probado en IE11, 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 luego intente Actualizar / Recargar en la página, en ese momento se genera un error de "Página no encontrada" cuando el navegador intenta localizar una página con eso como su URL. (También es probable que el navegador incluya esa cadena en la barra de direcciones cuando se encuentre en la página, lo cual es feo) location.href.
El segundo argumento history.pushState()es un título . Mirando por la web, la mayoría de los lugares dicen que "no se usa", y todas las soluciones aquí pasan nullpor eso. Sin embargo, en Mobile Safari al menos, 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 la página normalmente, coloca su título , que es preferible. Entonces, pasar document.titlepor eso da como resultado el mismo comportamiento.

JonBrave
fuente

3

Esta es la respuesta correcta. Funciona perfectamente en Chrome, IE 11, Firefox y Edge.

Concept211

3

Esta debería ser la respuesta aceptada, es multiplataforma y funciona bien.

calbertts 01 de

en jsp sevlet Después de enviar, actualizo la página. página no

mostrada

La mejor solución hasta ahora, pero probablemente no esté funcionando en navegadores antiguos

j4n7

2

Solución perfecta para navegadores modernos. Me he combinado con la respuesta @ Rohit416 para admitir navegadores antiguos simplemente usando la condición typeof (history.pushState) === "function" funciona sin problemas.

Miklos Krivan

74

<script>
window.location.hash="no-back-button";
window.location.hash="Again-No-back-button";//again because google chrome don't insert first hash into history
window.onhashchange=function(){window.location.hash="no-back-button";}
</script>

vrfvr
fuente

3

¡Genio! Utilicé esto para evitar el disparo accidental del botón Atrás cuando el usuario presiona Retroceso (en campos deshabilitados / de solo lectura, por ejemplo) en una aplicación web donde retroceder / avanzar realmente no tenía sentido de todos modos. Confirmado deshabilita la funcionalidad de retroceso y avance (aunque no los botones en sí), incluida la opción del menú contextual; verificado en IE8 a través de IE11, Chrome y FF.

nada es necesario

1

Esto funciona, pero restablece todos los datos ingresados en los cuadros de texto. ¿Es posible evitar la limpieza?

Somnium

66

Funcionó para mí en Firefox, pero no en Chrome (versión 36.0.1985.143)

baraber

Esto también funcionó para mí, pero en Firefox parece romper la window.history.back()función. Queremos evitar que los usuarios hagan clic en el botón Atrás del navegador, pero en algunos casos proporcionamos nuestro propio botón Atrás en la página. ¿Hay alguna manera de hacer que funcione?

AsGoodAsItGets

1

Esto no funciona para mi. Estoy usando Chrome versión 55 en Windows 10. Puse el script en varios lugares (inicio del encabezado, final del cuerpo, etc.) y aún puedo usar el botón Atrás para volver a la página anterior.

Victor Stoddard

28

Este código deshabilitará el botón de retroceso para los navegadores modernos que admiten la API de historial HTML5. En circunstancias normales, presionar el botón Atrás retrocede un paso, a la página anterior. Si usa history.pushState (), comienza a agregar subpasos adicionales a la página actual. La forma en que funciona es, si fuera a usar history.pushState () tres veces, luego comience a presionar el botón Atrás, las primeras tres veces volvería a navegar en estos pasos secundarios, y luego la cuarta vez volvería a La página anterior.

Si combina este comportamiento con un detector de eventos en el popstateevento, esencialmente puede configurar un bucle infinito de subestados. Entonces, carga la página, presiona un subestado, luego presiona el botón Atrás, que muestra un subestado y también presiona otro, por lo que si presiona el botón Atrás nuevamente, nunca se quedará sin subestados para presionar . Si cree que es necesario deshabilitar el botón Atrás, esto lo llevará allí.

history.pushState(null, null, 'no-back-button');
window.addEventListener('popstate', function(event) {
  history.pushState(null, null, 'no-back-button');
});

Jeremy Warne
fuente

2

En cualquier navegador, intente una página Actualizar / Recargar después de esto, y se quedará atascado en un error de "Página no encontrada", ya que intenta encontrar una página llamada no-back-button... (Es probable que el navegador también aparezca no-back-buttonen la dirección barra también, lo que parece feo.) Para ser justos, esta no es la única solución aquí que sufre de esto. El tercer argumento para history.pushState()es una url , y debe ser la url de su página actual: use location.hrefen su lugar.

JonBrave

44

Esto funcionó para mí. Simplemente cambie 'no-back-button' a "window.top.location.pathname + window.top.location.search" y se mantendrá el nombre de la página en la que se encuentra, incluso en la actualización

Steve

Entre otros, esto funcionó para mí, voto positivo. Consulte stackoverflow.com/questions/19926641/… .

user2171669

He explorado muchos casos, y esta es la mejor solución para el sitio de 1 página

djdance

Esta es una solución muy mala porque está cambiando la URL, por lo que si presiona hacia atrás y hacia adelante varias veces, Chrome redirigirá a una ruta que no existe

Tallboy

21

Para restringir el evento de regreso del navegador

window.history.pushState(null, "", window.location.href);
window.onpopstate = function () {
    window.history.pushState(null, "", window.location.href);
};

Fezal halai
fuente

1

¡Esto funciona muy bien en Chrome !, ¿por qué la gente no vota ya que esta es la mejor respuesta?

Tarık Seyceri

1

Acabo de probarlo con el sistema operativo Windows 10 en los siguientes navegadores (funciona muy bien) Chrome Versión 74.0.3729.108 (Versión oficial) (64 bits) Chrome Canary Versión 76.0.3780.0 (Versión oficial) Canario (32 bits) Chromium Versión 66.0. 3355.0 (Desarrollador Build) (64 bits) Firefox 66.0.3 (64 bits) EDGE IE 11 Safari 5.1.7

Tarık Seyceri

2

@ TarıkSeyceri porque esto solo funciona en los navegadores que a) admiten la API de historial b) la página realmente está utilizando la API de historial para administrar el estado

givanse

Ya no funciona en Chrome después de la Versión 75. Consulte: support.google.com/chrome/thread/8721521?hl=es

gene b.

13

    history.pushState(null, null, location.href);
    window.onpopstate = function () {
        history.go(1);
    };

Eng Mahmoud El Torri
fuente

12

Si bien esta puede ser una respuesta válida, es mucho más probable que ayude a otros al explicar qué hace el código y cómo funciona. Las respuestas de solo código tienden a recibir menos atención positiva y no son tan útiles como otras respuestas.

Aurora0001

Probado en Chrome, Firefox, IE y Edge. Funciona bien. Me salvaste.

Nooovice Boooy

12

Esta es la forma en que podría lograrlo. Cambiar extrañamente la ventana. La ubicación no funcionó bien en Chrome y Safari. Sucede que location.hash no crea una entrada en el historial de Chrome y Safari. Por lo tanto, tendrá que usar el pushstate. Esto está funcionando para mí en todos los navegadores.

    history.pushState({ page: 1 }, "title 1", "#nbb");
    window.onhashchange = function (event) {
        window.location.hash = "nbb";

    };

Sanchitos
fuente

1

Eso no funciona en IE9 y versiones posteriores, pushState no es compatible.

Alex

Excelente. Este es un buen enfoque y funciona en casi todos los navegadores más recientes.

Venugopal M

1

Funciona muy bien en IE posteriores. Solo ponga directamente en el documento$(document).ready(function () { .... });

Listo

Tenga en cuenta que debe agregar su uri actual antes de "#nbb". es decir, "cuenta # nbb"

Mladen Janjetovic

9

<html>
<head>
    <title>Disable Back Button in Browser - Online Demo</title>
    <style type="text/css">
        body, input {
            font-family: Calibri, Arial;
        }
    </style>
    <script type="text/javascript">
        window.history.forward();
        function noBack() {
            window.history.forward();
        }
    </script>
</head>
<body onload="noBack();" onpageshow="if (event.persisted) noBack();" onunload="">
    <H2>Demo</H2>
    <p>This page contains the code to avoid Back button.</p>
    <p>Click here to Goto <a href="noback.html">NoBack Page</a></p>
</body>
</html>

Ashwin Patil
fuente

¿Hay alguna documentación en alguna parte event.persisted?

Muhd

1

Aquí está el enlace encontrado para su pregunta. Encuéntralo aquí @Muhd

rbashish

Acabo de probar este, no funciona

Pedro Joaquín

8

Este artículo en jordanhollinger.com es la mejor opción que siento. Similar a la respuesta de Razor pero un poco más clara. Código a continuación; créditos completos a Jordan Hollinger:

Página anterior:

<a href="/page-of-no-return.htm#no-back>You can't go back from the next page</a>

Página de JavaScript sin retorno:

// It works without the History API, but will clutter up the history
var history_api = typeof history.pushState !== 'undefined'

// The previous page asks that it not be returned to
if ( location.hash == '#no-back' ) {
  // Push "#no-back" onto the history, making it the most recent "page"
  if ( history_api ) history.pushState(null, '', '#stay')
  else location.hash = '#stay'

  // When the back button is pressed, it will harmlessly change the url
  // hash from "#stay" to "#no-back", which triggers this function
  window.onhashchange = function() {
    // User tried to go back; warn user, rinse and repeat
    if ( location.hash == '#no-back' ) {
      alert("You shall not pass!")
      if ( history_api ) history.pushState(null, '', '#stay')
      else location.hash = '#stay'
    }
  }
}

dav_i
fuente

8

history.pushState(null, null, document.URL);
window.addEventListener('popstate', function () {
    history.pushState(null, null, document.URL);
});

Este javascript no permite que ningún usuario regrese (funciona en Chrome, FF, IE, Edge)

Surajit Mitra
fuente

5

Pruébalo con facilidad:

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

Lakhan
fuente

5

Este código se probó con los últimos navegadores Chrome y Firefox.

    <script type="text/javascript">
        history.pushState(null, null, location.href);
        history.back();
        history.forward();
        window.onpopstate = function () { history.go(1); };
    </script>

Franklin inocente F
fuente

Bienvenido huyhoang.

Franklin Inocencio F

3

Función muy simple y limpia para romper la flecha hacia atrás sin interferir con la página posterior.

Beneficios:

Se carga instantáneamente y restaura el hash original, para que el usuario no se distraiga con el cambio visible de la URL.
El usuario aún puede salir presionando 10 veces (eso es algo bueno) pero no accidentalmente
Ninguna interferencia del usuario como otras soluciones que usan onbeforeunload
Solo se ejecuta una vez y no interfiere con más manipulaciones de hash en caso de que use eso para rastrear el estado
Restaura el hash original, casi invisible.
Utiliza setIntervalpara que no rompa navegadores lentos y siempre funciona.
Javascript puro, no requiere historial HTML5, funciona en todas partes.
Sencillo, simple y juega bien con otro código.
No utiliza lo unbeforeunloadque interrumpe al usuario con el diálogo modal.
Simplemente funciona sin problemas.

Nota: algunas de las otras soluciones utilizan onbeforeunload. Por favor, no utilizar onbeforeunloadpara este propósito, el cual aparece un cuadro de diálogo cada vez que los usuarios intentan cerrar la ventana, golpe backarrow, etc. Modals como onbeforeunloadson por lo general sólo es apropiado en raras circunstancias, tales como cuando en realidad han realizado cambios en pantalla y refugio' No los salvé, no para este propósito.

Cómo funciona

Se ejecuta al cargar la página
Guarda su hash original (si hay uno en la URL).
Secuencialmente agrega # / noop / {1..10} al hash
Restaura el hash original

Eso es. No hay que perder el tiempo, no hay monitoreo de eventos en segundo plano, nada más.

Úselo en un segundo

Para implementar, simplemente agregue esto en cualquier lugar de su página o en su JS:

<script>
/* break back button */                                                                        
window.onload=function(){                                                                      
  var i=0; var previous_hash = window.location.hash;                                           
  var x = setInterval(function(){                                                              
    i++; window.location.hash = "/noop/" + i;                                                  
    if (i==10){clearInterval(x);                                                               
      window.location.hash = previous_hash;}                                                   
  },10);
}
</script>

error fatal
fuente

2

Esto parece haber funcionado para nosotros al deshabilitar el botón de retroceso en el navegador, así como el botón de retroceso que lo lleva de regreso.

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

jgabb
fuente

1

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

usuario3789888
fuente

1

Simplemente no puede y no debe hacer esto. Sin embargo, esto podría ser útil.

<script type = "text/javascript" >
history.pushState(null, null, 'pagename');
window.addEventListener('popstate', function(event) {
history.pushState(null, null, 'pagename');
});
</script>

Funciona en mi Chrome y Firefox

Shailendra Sharma
fuente

1

Intente esto para evitar el botón de retroceso en IE que por defecto actúa como "Atrás":

<script language="JavaScript">
$(document).ready(function() {
$(document).unbind('keydown').bind('keydown', function (event) {
    var doPrevent = false;


    if (event.keyCode === 8 ) {
        var d = event.srcElement || event.target;
        if ((d.tagName.toUpperCase() === 'INPUT' && 
             (
                 d.type.toUpperCase() === 'TEXT' ||
                 d.type.toUpperCase() === 'PASSWORD' || 
                 d.type.toUpperCase() === 'FILE' || 
                 d.type.toUpperCase() === 'EMAIL' || 
                 d.type.toUpperCase() === 'SEARCH' || 
                 d.type.toUpperCase() === 'DATE' )
             ) || 
             d.tagName.toUpperCase() === 'TEXTAREA') {
            doPrevent = d.readOnly || d.disabled;
        }
        else {

            doPrevent = true;
        }
    }

    if (doPrevent) {
        event.preventDefault();
    }

    try {
        document.addEventListener('keydown', function (e) {
               if ((e.keyCode === 13)){
                  // alert('Enter keydown');
                   e.stopPropagation();
                   e.preventDefault();
               }



           }, true);
        } catch (err) {}
    });
});
</script>

Ajit Kamble
fuente

1

Creo que la solución perfecta pero en realidad es bastante sencilla, que utilicé durante muchos años.

Básicamente se trata de asignar el evento "onbeforeunload" de la ventana junto con los eventos del documento en curso 'mouseenter' / 'mouseleave' para que la alerta solo se active cuando los clics están fuera del alcance del documento (que podría ser el botón de retroceso o avance del navegador)

$(document).on('mouseenter', function(e) { 
        window.onbeforeunload = null; 
    }
);

$(document).on('mouseleave', function(e) { 
        window.onbeforeunload = function() { return "You work will be lost."; };
    }
);

Abdelqoddous Rifai
fuente

1

En un navegador moderno, esto parece funcionar:

// https://developer.mozilla.org/en-US/docs/Web/API/History_API
let popHandler = () => {
  if (confirm('Go back?')) {
    window.history.back() 
  } else {
    window.history.forward()
    setTimeout(() => {
      window.addEventListener('popstate', popHandler, {once: true})
    }, 50) // delay needed since the above is an async operation for some reason
  }
}
window.addEventListener('popstate', popHandler, {once: true})
window.history.pushState(null,null,null)

Joakim L. Christiansen
fuente

1

No estoy seguro de lo que sucedió, pero por alguna razón rechacé esta respuesta en otra máquina. Solo le hice saber que esta no era mi intención, pero ya no puedo deshacer la votación: /

Lennard Fonteijn

Sin sentimientos heridos @LennardFonteijn :)

Joakim L. Christiansen

1

Ninguna de las respuestas más votadas me funcionó en Chrome 79 . Parece que Chrome cambió su comportamiento con respecto al botón Atrás después de la Versión 75, vea aquí:

https://support.google.com/chrome/thread/8721521?hl=en

Sin embargo, en ese hilo de Google, la respuesta proporcionada por Azrulmukmin Azmi al final sí funcionó. Esta es su solución.

<script>

history.pushState(null, document.title, location.href); 
history.back(); 
history.forward(); 
window.onpopstate = function () { 
    history.go(1); 
};

</script>

El problema con Chrome es que no activa el evento onpopstate a menos que realice una acción del navegador (es decir, historial de llamadas.back). Es por eso que los agregué al script.

No entiendo completamente lo que escribió, pero aparentemente history.back() / history.forward()ahora se requiere un adicional para bloquear Back in Chrome 75+.

gen b.
fuente

Después de buscar en alto y bajo, esto finalmente funcionó también en los navegadores de Android, donde, por alguna razón, el evento de botón de retroceso del navegador no se detectó con ningún otro script que probé. Gracias, gracias, gracias de nuevo! Probado y funcionando bien con Chrome 83, tanto de escritorio como móvil. Gene, eres un salvavidas!

Ivan

0

Creo una página HTML (index.html). También creo uno (mecanismo.js) dentro de una carpeta / directorio (script). Luego, coloco todo mi contenido dentro de (index.html) usando formularios, tablas, span y etiquetas div, según sea necesario. ¡Ahora, aquí está el truco que hará que retroceder / avanzar no haga nada!

Primero, el hecho de que solo tienes una página. En segundo lugar, el uso de JavaScript con etiquetas span / div para ocultar y mostrar contenido en la misma página cuando sea necesario a través de enlaces regulares.

Dentro de 'index.html':

    <td width="89px" align="right" valign="top" style="letter-spacing:1px;">
     <small>
      <b>
       <a href="#" class="traff" onClick="DisplayInTrafficTable();">IN</a>&nbsp;
      </b>
     </small>
     [&nbsp;<span id="inCountSPN">0</span>&nbsp;]
    </td>

Dentro de 'mecanismo.js':

    function DisplayInTrafficTable()
    {
     var itmsCNT = 0;
     var dsplyIn = "";
     for ( i=0; i<inTraffic.length; i++ )
     {
      dsplyIn += "<tr><td width='11'></td><td align='right'>" + (++itmsCNT) + "</td><td width='11'></td><td><b>" + inTraffic[i] + "</b></td><td width='11'></td><td>" + entryTimeArray[i] + "</td><td width='11'></td><td>" + entryDateArray[i] + "</td><td width='11'></td></tr>";
     }
     document.getElementById('inOutSPN').innerHTML = "" +
                                             "<table border='0' style='background:#fff;'><tr><th colspan='21' style='background:#feb;padding:11px;'><h3 style='margin-bottom:-1px;'>INCOMING TRAFFIC REPORT</h3>" + DateStamp() + "&nbsp;&nbsp;-&nbsp;&nbsp;<small><a href='#' style='letter-spacing:1px;' onclick='OpenPrintableIn();'>PRINT</a></small></th></tr><tr style='background:#eee;'><td></td><td><b>###</b></td><td></td><td><b>ID #</b></td><td></td><td width='79'><b>TYPE</b></td><td></td><td><b>FIRST</b></td><td></td><td><b>LAST</b></td><td></td><td><b>PLATE #</b></td><td></td><td><b>COMPANY</b></td><td></td><td><b>TIME</b></td><td></td><td><b>DATE</b></td><td></td><td><b>IN / OUT</b></td><td></td></tr>" + dsplyIn.toUpperCase() + "</table>" +
                                             "";
     return document.getElementById('inOutSPN').innerHTML;
    }

Parece complicado, pero tenga en cuenta los nombres y las llamadas de las funciones, el HTML incorporado y las llamadas de identificación de la etiqueta span. ¡Esto fue para mostrar cómo puede inyectar HTML diferente en la misma etiqueta de extensión en la misma página! ¿Cómo puede Atrás / Adelante afectar este diseño? ¡No puede, porque está ocultando objetos y reemplazando a otros en la misma página!

¿Cómo ocultar y mostrar? Aquí va: Funciones internas en 'mecanismo.js' según sea necesario, use:

    document.getElementById('textOverPic').style.display = "none"; //hide
    document.getElementById('textOverPic').style.display = "";     //display

Dentro de las funciones de llamada 'index.html' a través de enlaces:

    <img src="images/someimage.jpg" alt="" />
    <span class="textOverPic" id="textOverPic"></span>

y

    <a href="#" style="color:#119;font-size:11px;text-decoration:none;letter-spacing:1px;" onclick="HiddenTextsManager(1);">Introduction</a>

Espero no haberte dado dolor de cabeza. Lo siento si lo hice :-)

hacker1033
fuente

0

En mi caso, este fue un pedido de compras. Entonces, lo que hice fue desactivar el botón. Cuando el usuario hizo clic de nuevo, el botón todavía estaba deshabilitado. Cuando hicieron clic de nuevo una vez más, y luego hicieron clic en un botón de página para avanzar. Sabía que su pedido fue enviado y saltado a otra página.

En el caso de que la página se actualizara, lo que haría que el botón (teóricamente) estuviera disponible; Luego pude reaccionar en la carga de la página que el pedido ya se envió y redirigir también.

Valamas
fuente

0

<script language="JavaScript">
    javascript:window.history.forward(1);
</script>

Kamlesh
fuente

3

1. Lo javascript:que ha escrito define una etiqueta de JavaScript llamada "javascript". Dudo mucho que quisieras eso; Sospecho que te estás mezclando href=javascript:...con <script>bloques de JavaScript . 2. language="JavaScript"dejó de ser un <script>atributo válido en HTML5. 3. Los 2 puntos anteriores no importan mucho; lo que importa es que history.forward(1)no funciona en Mobile Safari (al menos). Use una de las history.pushState()respuestas en su lugar.

JonBrave

0

Simplemente puede poner un pequeño script y luego verificar. No te permitirá visitar la página anterior. Esto se hace en javascript.

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

La función window.onunload se activa cuando intenta visitar la página anterior o anterior a través del navegador.

Espero que esto ayude.

noobprogrammer
fuente

0

Tuve este problema con React.JS. (componente de clase)

Y resuelve fácilmente

componentDidMount(){
   window.addEventListener("popstate", e=> {
      this.props.history.goForward();
   }
}

He usado HashRouterde react-router-dom.

Oo
fuente

0

Simplemente configure location.hash="Something", al presionar el botón de retroceso, el hash se eliminará de la URL pero la página no volverá, este método es bueno para evitar retroceder accidentalmente, pero por razones de seguridad, debe diseñar su back-end para evitar volver a responder

Abhishek
fuente

-1

//"use strict";
function stopBackSpace(e) {
    var ev = e || window.event;
    var obj = ev.target || ev.srcElement;
    var t = obj.type || obj.getAttribute('type');

    var vReadOnly = obj.getAttribute('readonly');
    var vEnabled = obj.getAttribute('enabled');
    // null
    vReadOnly = (vReadOnly == null) ? false : vReadOnly;
    vEnabled = (vEnabled == null) ? true : vEnabled;
    // when click Backspace,judge the type of obj.

    var flag1 = ((t == 'password' || t == 'text' || t == 'textarea') && ((vReadOnly == true || vReadOnly == 'readonly') || vEnabled != true)) ? true : false;

    var flag2 = (t != 'password' && t != 'text' && t != 'textarea') ? true : false;

    if (flag2) {
        e.keyCode = 0;
        e.cancelBubble = true;
        return false;
    }
    if (flag1) {
        e.keyCode = 0;
        e.cancelBubble = true;
        return false;
    }
}
if (typeof($) == 'function') {
    $(function() {
        $(document).keydown(function(e) {
            if (e.keyCode == 8) {
                return stopBackSpace(e);
            }
        });
    });
} else {
    document.onkeydown = stopBackSpace;
}

Chauncey.Zhong
fuente

1 obtenga el objeto de evento 2. para determinar el tipo de origen del evento, como la condición de juicio. 3.Cuando la tecla Retroceso, el tipo de origen del evento para la contraseña o único, y la propiedad de solo lectura para la propiedad verdadera o habilitada es falsa, entonces la clave de retroceso falla. Cuando se pulsa Retroceso, la fuente del evento escribe la contraseña o la única, es la falla de la tecla de retroceso

Chauncey.

La pregunta es acerca del uso del botón de navegación hacia atrás, no la tecla de retroceso.

Quentin

cómo detener el botón de retroceso del navegador usando javascript

Respuestas:

Configuración recomendada: