come fermare il pulsante Indietro del browser usando javascript

156

Sto facendo un'app di quiz online in php. Voglio impedire all'utente di tornare indietro in un esame. Ho provato il seguente script ma si ferma il mio timer. Cosa dovrei fare?

Ho incluso il codice sorgente. Il timer è memorizzato in cdtimer.js

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

Ho il timer dell'esame che richiede una durata per l'esame da un valore mysql . Il timer si avvia di conseguenza ma si interrompe quando inserisco il codice per disabilitare il pulsante Indietro. Qual è il mio problema?

javascript browser

— Sawant Akshay
fonte

per nodeJS rileva e arresta l'evento del pulsante Indietro del browser

— Darshan Dixit il

158

Esistono numerosi motivi per cui disabilitare il pulsante Indietro non funzionerà davvero. La tua scommessa migliore è avvisare l'utente:

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

Questa pagina elenca un numero di modi in cui potresti provare a disabilitare il pulsante Indietro, ma nessuno è garantito:

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

— Coline
fonte

Dovresti controllare nel tuo codice PHP se la risposta è già stata inviata e in tal caso respingerla.

— Sela Yair,

4

Vale la pena di ricordare che le cose sono cambiate ora nei browser moderni: vedi stackoverflow.com/questions/19926641/...

— devrobf

128

In genere è una cattiva idea ignorare il comportamento predefinito del browser web. Lo script lato client non ha il privilegio sufficiente per farlo per motivi di sicurezza.

Ci sono anche alcune domande simili,

Non puoi realtà è possibile disabilitare il pulsante Indietro del browser. Tuttavia, puoi fare magie usando la tua logica per impedire all'utente di tornare indietro, il che creerà un'impressione come se fosse disabilitata. Ecco come, controlla il seguente frammento.

(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);

Questo è in puro JavaScript, quindi funzionerebbe nella maggior parte dei browser. Disabiliterebbe anche la chiave backspace ma la chiave funzionerà normalmente all'internoinput campi etextarea .

Installazione consigliata:

Inserisci questo snippet in uno script separato e includilo in una pagina in cui desideri questo comportamento. Nella configurazione corrente eseguirà l' onloadevento di DOM che è il punto di ingresso ideale per questo codice.

DEMO funzionante!

Testato e verificato nei seguenti browser,

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

— Rohit416
fonte

1

Non capisco perché setTimeout. Se all'inizio aggiungessi solo #! per localizzare e rimuovere setTimeout, funziona ancora.

— Baraber,

sì vero, funzionerà, ma se devo ricordare qualcosa dalla memoria quando ho avuto questo al primo posto ... il flusso non funzionava correttamente in Chrome come in altri browser. Chrome ha restituito il vuoto location.hashinizialmente, quindi mi ha fatto farlo in questo modo. Potrebbero esserci ulteriori miglioramenti, ma 50 ms una volta non mi sono costati molto, quindi lascio lì.

— Rohit416,

Oh, è stata una sfida per la memoria, grazie :) Ho usato la tua soluzione, ma ho sostituito setInterval dal gestore .onhashchange. Funziona perfettamente. Ma ho un'altra domanda: perché "if (global.location.hash! = _Hash)"? Penso che questa condizione possa essere vera per tutto il tempo perché window.location.hash dovrebbe sempre restituire l'hash con il carattere '#' e _hash non conterrà mai il carattere '#'. Ti ricordi qualcosa al riguardo? È solo una protezione nel caso in cui il browser non restituisca il carattere '#' in location.hash?

— baraber

Ho creato un file .js come raccomandato e ho incluso il file js nel mio codice usando quanto segue: <script src = "./ javascript / noback.js"> </script> Ma posso ancora eseguire un back (usando Safari). Cosa mi sto perdendo? Questa libreria è stata aggiunta nello stesso modo delle altre librerie che uso, quindi l'inclusione è buona.

— Tim

1

Blocca il pulsante Indietro su iPad Air,

— iOS

75

Mi sono imbattuto in questo, avevo bisogno di una soluzione che funzionasse correttamente e "bene" su una varietà di browser, incluso Mobile Safari (iOS9 al momento della pubblicazione). Nessuna delle soluzioni era giusta. Offro quanto segue (testato su IE11, FireFox, Chrome e Safari):

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

Nota quanto segue:

history.forward()(la mia vecchia soluzione) non funziona su Mobile Safari --- sembra non fare nulla (cioè l'utente può ancora tornare indietro). history.pushState()funziona su tutti loro.
il terzo argomento a history.pushState() è un url . Soluzioni che trasmettono una stringa simile 'no-back-button'o 'pagename'sembrano funzionare correttamente, fino a quando non si tenta di aggiornare / ricaricare la pagina, a quel punto viene generato un errore "Pagina non trovata" quando il browser tenta di individuare una pagina con quella come URL. (È anche probabile che il browser includa quella stringa nella barra degli indirizzi nella pagina, che è brutta.) location.hrefDovrebbe essere usato per l'Url.
il secondo argomento a history.pushState()è un titolo . Guardando in giro per la maggior parte dei luoghi, si dice che non è "usato", e tutte le soluzioni qui passano nullper quello. Tuttavia, almeno in Safari per dispositivi mobili, l'Url della pagina viene inserito nell'elenco a discesa della cronologia a cui l'utente può accedere. Ma quando aggiunge normalmente una voce per una visita alla pagina, inserisce il titolo , che è preferibile. Quindi passare document.titleper questo comporta lo stesso comportamento.

— JonBrave
fonte

3

Questa è la risposta corretta Funziona perfettamente su Chrome, IE 11, Firefox e Edge.

— Concept211

3

Questa dovrebbe essere la risposta accettata, è multipiattaforma e funziona bene.

— Calbertts,

in jsp sevlet Dopo l'invio aggiorno la pagina. pagina non visualizzata (errore)

— Madhuka Dilhan

La soluzione migliore finora, ma probabilmente non funziona nei browser più vecchi

— j4n7,

2

Soluzione perfetta per i browser moderni. Ho combinato con la risposta di @ Rohit416 per supportare il browser più vecchio solo usando la condizione typeof (history.pushState) === "funzione" funziona senza problemi.

— 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
fonte

3

Genio! L'ho usato per prevenire l'attivazione accidentale del pulsante Indietro quando l'utente preme Backspace (su campi disabilitati / di sola lettura, ad esempio) in un'app Web in cui back / forward non ha comunque senso. Confermato disabilita la funzionalità di andata e ritorno (anche se non i pulsanti stessi), inclusa l'opzione del menu di scelta rapida; verificato in IE8 tramite IE11, Chrome e FF.

— nothingisnecessary

1

Funziona, ma ripristina tutti i dati inseriti nelle caselle di testo. È possibile impedire la cancellazione?

— Somnium,

6

Ha funzionato per me su Firefox, ma non su Chrome (versione 36.0.1985.143)

— baraber

Questo ha funzionato anche per me, ma su Firefox sembra interrompere la window.history.back()funzione. Vogliamo impedire agli utenti di fare clic sul pulsante Indietro del browser, ma in alcuni casi forniamo il nostro pulsante Indietro sulla pagina. C'è un modo per farlo funzionare?

— AsGoodAsIt Ottiene

1

Questo non funziona per me. Sto usando Chrome versione 55 su Windows 10. Ho inserito lo script in diversi punti (inizio dell'intestazione, fine del corpo, ecc.) E posso ancora usare il pulsante Indietro per tornare alla pagina precedente.

— Victor Stoddard,

28

Questo codice disabiliterà il pulsante Indietro per i browser moderni che supportano l'API History HTML5. In circostanze normali, premendo il pulsante Indietro si torna indietro di un passaggio alla pagina precedente. Se usi history.pushState (), inizi ad aggiungere ulteriori passaggi secondari alla pagina corrente. Il modo in cui funziona è, se dovessi usare history.pushState () tre volte, quindi iniziare a premere il pulsante Indietro, le prime tre volte tornerebbe indietro in questi passaggi secondari, quindi la quarta volta tornerà a la pagina precedente.

Se combini questo comportamento con un listener di eventi popstatesull'evento, puoi essenzialmente impostare un ciclo infinito di stati secondari. Quindi, si carica la pagina, si preme uno stato secondario, quindi si preme il pulsante Indietro, che apre uno stato secondario e ne spinge anche un altro, quindi se si preme di nuovo il pulsante Indietro non si esauriranno mai gli stati secondari per premere . Se ritieni che sia necessario disabilitare il pulsante Indietro, questo ti porterà lì.

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

— Jeremy Warne
fonte

2

Su qualsiasi browser, prova una pagina Aggiorna / Ricarica dopo questo e rimarrai bloccato su un errore "Pagina non trovata", poiché tenta di trovare una pagina denominata no-back-button... (È probabile che anche il browser venga visualizzato no-back-buttonnell'indirizzo anche bar, che sembra brutto.) Ad essere onesti, questa non è l'unica soluzione che soffre di questo. Il terzo argomento history.pushState()è un url e deve essere l'URL della pagina corrente: utilizzare location.hrefinvece.

— JonBrave,

4

Questo ha funzionato per me. Cambia "no-back-button" in "window.top.location.pathname + window.top.location.search" e rimarrà il nome della pagina in cui ti trovi, anche in aggiornamento

— Steve

Tra l'altro, questo ha funzionato per me, voto positivo. Fare riferimento a stackoverflow.com/questions/19926641/… .

— user2171669

Ho esplorato molti casi e questa è la soluzione migliore per il sito di 1 pagina

— djdance,

Questa è una pessima soluzione perché stai cambiando l'URL, quindi se colpisci avanti e indietro alcune volte Chrome reindirizzerà a un percorso che non esiste

— Tallboy

21

Per limitare il back event del browser

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

— Fezal halai
fonte

1

Funziona alla grande su Chrome! Perché le persone non votano perché questa è la risposta migliore?

— Tarık Seyceri,

1

l'ho appena testato utilizzando il sistema operativo Windows 10 sui seguenti browser (funziona alla grande) Chrome versione 74.0.3729.108 (build ufficiale) (64 bit) Chrome Canary versione 76.0.3780.0 (build ufficiale) canarino (32 bit) Chromium versione 66.0. 3355.0 (build dello sviluppatore) (64 bit) Firefox 66.0.3 (64 bit) EDGE IE 11 Safari 5.1.7

— Tarık Seyceri

2

@ TarıkSeyceri perché funziona solo su browser che a) supportano l'API della cronologia b) la pagina sta effettivamente utilizzando l'API della cronologia per gestire lo stato

— givanse

Non funziona più in Chrome dopo la versione 75. Vedi: support.google.com/chrome/thread/8721521?hl=it

— gene b.

13

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

— Eng Mahmoud El Torri
fonte

12

Sebbene questa possa essere una risposta valida, hai molte più probabilità di aiutare gli altri spiegando cosa fa il codice e come funziona. Le risposte di solo codice tendono a ricevere meno attenzione positiva e non sono utili come le altre risposte.

— Aurora0001

Testato su Chrome, Firefox, IE e Edge. Funziona bene. Mi hai salvato.

— Nooovice Boooy,

12

Questo è il modo in cui ho potuto realizzarlo. Cambiando stranamente la finestra, la posizione non ha funzionato bene in Chrome e Safari. Accade che location.hash non crei una voce nella storia di Chrome e Safari. Quindi dovrai usare il pushstate. Questo funziona per me in tutti i browser.

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

    };

— Sanchitos
fonte

1

Ciò non funziona in IE9 e versioni precedenti, pushState non è supportato.

— Alex,

Grande. Questo è un buon approccio e funziona in quasi tutti i browser più recenti.

— Venugopal M

1

Funziona alla grande in IE successivi. Inserito direttamente nel documento. Già: $(document).ready(function () { .... });

— Oppa Gingham Style,

Tieni presente che devi aggiungere l'uri corrente prima di "#nbb". cioè "account # 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
fonte

C'è della documentazione da qualche parte per event.persisted?

— Muhd,

1

Ecco il link trovato per la tua domanda. Lo trovi qui @Muhd

— rbashish

Ho appena provato questo, non funzionando

— Pedro Joaquín il

8

Questo articolo su jordanhollinger.com è l'opzione migliore che sento. Simile alla risposta di Razor ma un po 'più chiara. Codice sotto; crediti completi per Jordan Hollinger:

Pagina prima di:

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

Pagina di JavaScript senza ritorno:

// 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
fonte

8

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

Questo javascript non consente a nessun utente di tornare indietro (funziona in Chrome, FF, IE, Edge)

— Surajit Mitra
fonte

5

Provalo con facilità:

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

— Lakhan
fonte

5

Questo codice è stato testato con gli ultimi browser Chrome e Firefox.

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

— Franklin Innocent F
fonte

Benvenuto huyhoang.

— Franklin Innocent F,

3

Funzione molto semplice e pulita per rompere la freccia indietro senza interferire con la pagina in seguito.

Benefici:

Carica istantaneamente e ripristina l'hash originale, quindi l'utente non viene distratto dalla modifica visiva dell'URL.
L'utente può comunque uscire premendo 10 volte indietro (è una buona cosa) ma non per errore
Nessuna interferenza dell'utente come altre soluzioni che utilizzano onbeforeunload
Funziona solo una volta e non interferisce con ulteriori manipolazioni dell'hash nel caso in cui tu lo usi per tracciare lo stato
Ripristina l'hash originale, quindi quasi invisibile.
Si utilizza in setIntervalmodo da non interrompere i browser lenti e funziona sempre.
Javascript puro, non richiede la cronologia HTML5, funziona ovunque.
Discreto, semplice e gioca bene con altri codici.
Non usa unbeforeunload che interrompe l'utente con la finestra di dialogo modale.
Funziona senza problemi.

Nota: alcune delle altre soluzioni utilizzano onbeforeunload. Si prega di non utilizzare onbeforeunloada questo scopo, che apre una finestra di dialogo ogni volta che gli utenti tentano di chiudere la finestra, premere backarrow, ecc. Modali comeonbeforeunload sono solitamente appropriati solo in rare circostanze, come quando hanno effettivamente apportato modifiche sullo schermo e sul rifugio ' li ho salvati, non per questo scopo.

Come funziona

Esegue il caricamento della pagina
Salva l'hash originale (se presente nell'URL).
Aggiunge in sequenza # / noop / {1..10} all'hash
Ripristina l'hash originale

Questo è tutto. Nessun altro pasticcio, nessun monitoraggio degli eventi in background, nient'altro.

Usalo in un secondo

Per distribuire, basta aggiungere questo ovunque sulla tua pagina o nel tuo 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>

— errore fatale
fonte

2

Questo sembra aver funzionato per noi nel disabilitare il pulsante Indietro sul browser, così come il pulsante Backspace che ti riporta indietro.

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

— jgabb
fonte

1

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

— user3789888
fonte

1

Semplicemente non puoi e non dovresti farlo. Tuttavia, ma questo potrebbe essere utile

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

Funziona con Chrome e Firefox

— Shailendra Sharma
fonte

1

Prova questo per impedire il pulsante backspace in IE che di default agisce come "Back":

<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
fonte

1

Credo che la soluzione perfetta ma in realtà sia piuttosto semplice, che ho usato per molti anni.

In pratica sta assegnando l'evento "onbeforeunload" della finestra insieme agli eventi 'mouseenter' / 'mouseleave' del documento in corso, quindi l'avviso si innesca solo quando i clic sono al di fuori dell'ambito del documento (che quindi potrebbe essere il pulsante indietro o avanti del browser)

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

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

— Abdelqoddous Rifai
fonte

1

In un browser moderno questo sembra funzionare:

// 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
fonte

1

Non sono sicuro di quello che è successo, ma per qualche motivo ho votato in negativo questa risposta su un'altra macchina. Solo farti sapere che questa non era la mia intenzione, ma non posso più annullare il voto: /

— Lennard Fonteijn l'

Nessun sentimento ferito @LennardFonteijn :)

— Joakim L. Christiansen il

1

Nessuna delle risposte più votate ha funzionato per me in Chrome 79 . Sembra che Chrome abbia cambiato comportamento rispetto al pulsante Indietro dopo la versione 75, vedi qui:

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

Tuttavia, in quel thread di Google, la risposta fornita da Azrulmukmin Azmi alla fine ha funzionato. Questa è la sua soluzione

<script>

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

</script>

Il problema con Chrome è che non attiva l'evento onpopstate a meno che non si esegua un'azione del browser (ad es. Call history.back). Ecco perché li ho aggiunti allo script.

Non capisco del tutto quello che ha scritto, ma a quanto pare history.back() / history.forward()ora è necessario un ulteriore per bloccare Back in Chrome 75+.

— gene b.
fonte

Dopo aver cercato in alto e in basso, alla fine ha funzionato anche sui browser Android, dove per qualche motivo l'evento del pulsante Indietro del browser non è stato rilevato con nessun altro script che ho provato. Grazie, grazie, grazie ancora! Testato e funzionante su Chrome 83 sia desktop che mobile! Gene, sei un vero toccasana!

— Ivan

0

Creo una pagina HTML (index.html). Ne creo anche uno (meccanismo.js) all'interno di una cartella / directory (script). Quindi, depongo tutto il mio contenuto all'interno di (index.html) usando i tag form, table, span e div secondo necessità. Ora, ecco il trucco che non farà nulla avanti / indietro!

Innanzitutto, il fatto che hai solo una pagina! In secondo luogo, l'uso di JavaScript con tag span / div per nascondere e visualizzare il contenuto sulla stessa pagina quando necessario tramite collegamenti regolari!

All'interno di "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>

All'interno di "meccanismi.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;
    }

Sembra peloso, ma nota i nomi e le chiamate delle funzioni, l'HTML incorporato e le chiamate ID tag span. Questo per mostrare come puoi iniettare HTML diversi nello stesso tag span sulla stessa pagina! In che modo Indietro / Avanti può influenzare questo design? Non può, perché stai nascondendo oggetti e sostituendoli tutti nella stessa pagina!

Come nascondere e visualizzare? Ecco qui: Funzioni interne in 'mechan.js' secondo necessità, usare:

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

All'interno delle funzioni di chiamata 'index.html' tramite link:

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

e

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

Spero di non averti fatto venire il mal di testa. Scusa se l'ho fatto :-)

— hacker1033
fonte

0

Nel mio caso questo era un ordine di acquisto. Quindi quello che ho fatto è stato disabilitare il pulsante. Quando l'utente ha fatto clic indietro, il pulsante era ancora disabilitato. Quando hanno fatto clic nuovamente una volta, quindi hanno fatto clic su un pulsante della pagina per andare avanti. Sapevo che il loro ordine era stato inviato e saltato su un'altra pagina.

Nel caso in cui la pagina fosse effettivamente aggiornata, ciò renderebbe il pulsante (teoricamente) disponibile; Sono stato quindi in grado di reagire nel caricamento della pagina che l'ordine è già stato inviato e reindirizzare anche allora.

— Valamas
fonte

0

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

— Kamlesh
fonte

3

1. Quello javascript:che hai scritto definisce un'etichetta JavaScript denominata "javascript". Dubito fortemente che lo intendessi; Sospetto che tu stia confondendo href=javascript:...con i <script>blocchi JavaScript . 2. ha language="JavaScript"smesso di essere un <script>attributo valido in HTML5. 3. I 2 punti precedenti non contano molto; ciò che conta è che history.forward(1)non funziona in Mobile Safari (almeno). Usa invece una delle history.pushState()risposte.

— JonBrave,

0

Puoi semplicemente mettere un piccolo script e quindi controllare. Non ti permetterà di visitare la pagina precedente. Questo è fatto in JavaScript.

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

La funzione window.onunload si attiva quando si tenta di visitare la pagina precedente o precedente tramite il browser.

Spero che questo ti aiuti.

— noobprogrammer
fonte

0

Ho avuto questo problema con React.JS. (componente di classe)

E risolvi facilmente

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

Ho usato HashRouterda react-router-dom.

— oo
fonte

0

Basta impostare location.hash="Something", premendo il pulsante indietro l'hash verrà rimosso dall'URL ma la pagina non tornerà indietro, questo metodo è utile per impedire il ritorno accidentale, ma per motivi di sicurezza è necessario progettare il back-end per impedire la risposta

— Abhishek
fonte

-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
fonte

1 ottenere l'oggetto evento 2. per determinare il tipo di origine dell'evento, come condizione di giudizio. 3.Quando Hit Backspace, il tipo di origine dell'evento per la password o single e la proprietà readonly su true o la proprietà abilitata è falsa, quindi l'errore della chiave backspace. Quando si preme Backspace, l'origine dell'evento digita la password o single, è l'errore della chiave di backspace

— Chauncey.Zhong

La domanda è: l'utilizzo del pulsante di navigazione indietro non del tasto backspace.

— Quentin,