So stoppen Sie die Zurück-Schaltfläche des Browsers mit Javascript

155

Ich mache eine Online-Quiz-App in PHP. Ich möchte den Benutzer daran hindern, an einer Prüfung teilzunehmen. Ich habe das folgende Skript ausprobiert, aber es stoppt meinen Timer. Was soll ich machen?

Ich habe den Quellcode eingefügt. Der Timer ist in cdtimer.js gespeichert

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

Ich habe den Prüfungstimer, der eine Dauer für die Prüfung von einem MySQL- Wert benötigt. Der Timer startet entsprechend, stoppt jedoch, wenn ich den Code zum Deaktivieren der Zurück-Taste eingebe. Was ist mein Problem?

javascript browser Sawant Akshay
quelle

für nodeJS erkennen und stoppen Sie das Button-Ereignis des Browsers

Darshan Dixit

157

Es gibt zahlreiche Gründe, warum das Deaktivieren der Zurück-Taste nicht wirklich funktioniert. Am besten warnen Sie den Benutzer:

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

Diese Seite listet eine Reihe von Möglichkeiten , wie Sie könnten versuchen , die Zurück - Taste zu deaktivieren, aber keine sind garantiert:

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

ColinE
quelle

Sie sollten Ihren PHP-Code einchecken, wenn die Antwort bereits übermittelt wurde, und wenn ja, ablehnen.

Sela Yair

4

Es ist erwähnenswert, dass sich die Dinge in modernen Browsern inzwischen geändert haben: siehe stackoverflow.com/questions/19926641/…

devrobf

127

Es ist im Allgemeinen eine schlechte Idee, das Standardverhalten des Webbrowsers zu überschreiben. Das clientseitige Skript verfügt aus Sicherheitsgründen nicht über die entsprechenden Berechtigungen.

Es werden auch nur wenige ähnliche Fragen gestellt:

Sie können die Zurück-Schaltfläche des Browsers nicht deaktivieren. Sie können jedoch mithilfe Ihrer Logik zaubern, um zu verhindern, dass Benutzer zurück navigieren, wodurch ein Eindruck entsteht, als wäre er deaktiviert. Schauen Sie sich das folgende Snippet an.

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

Dies ist in reinem JavaScript, so dass es in den meisten Browsern funktionieren würde. Es wäre auch deaktivieren Backspace Schlüssel aber Schlüssel funktionieren normalerweise in inputFelder und textarea.

Empfohlenes Setup:

Platzieren Sie dieses Snippet in einem separaten Skript und fügen Sie es auf einer Seite ein, auf der Sie dieses Verhalten wünschen. Im aktuellen Setup wird das onloadEreignis DOM ausgeführt, das der ideale Einstiegspunkt für diesen Code ist.

Arbeiten DEMO!

In folgenden Browsern getestet und verifiziert,

Chrom.
Feuerfuchs.
IE (8-11) und Edge.
Safari.

Rohit416
quelle

1

Ich verstehe nicht warum das setTimeout. Wenn ich gerade erst # anhänge! Um das setTimeout zu lokalisieren und zu entfernen, funktioniert es immer noch.

Baraber

Ja, stimmt, es wird funktionieren, aber wenn ich etwas aus dem Speicher abrufen muss, als ich dies zuerst hatte ... funktionierte der Fluss in Chrome nicht richtig wie in anderen Browsern. Chrome hat das leere location.hashzunächst zurückgegeben, sodass ich es so machen musste. Es könnte weitere Verbesserungen geben, aber 50 ms haben mich nur einmal nicht viel gekostet, also lasse ich es dort.

Rohit416

Oh, das war eine Speicherherausforderung, danke :) Ich habe Ihre Lösung verwendet, aber das setInterval durch den .onhashchange-Handler ersetzt. Funktioniert perfekt. Aber ich habe noch eine andere Frage: Warum "if (global.location.hash! = _Hash)"? Ich denke, diese Bedingung kann immer nur zutreffen, da window.location.hash immer den Hash mit dem Zeichen '#' zurückgeben sollte und _hash niemals das Zeichen '#' enthält. Erinnerst du dich daran? Ist das nur ein Schutz für den Fall, dass der Browser das Zeichen '#' in location.hash nicht zurückgibt?

Baraber

Ich habe wie empfohlen eine .js-Datei erstellt und die js-Datei wie folgt in meinen Code aufgenommen: <script src = "./ javascript / noback.js"> </ script> Aber ich kann trotzdem einen Back durchführen (mit Safari). Was vermisse ich? Diese Bibliothek wurde auf die gleiche Weise wie andere von mir verwendete Bibliotheken hinzugefügt, daher ist das Include gut.

Tim

Der Code wurde in allen genannten Browsern getestet und als ich das letzte Mal überprüft habe, dass er in allen funktioniert. Ich habe das heute in Safari getestet und es hat funktioniert. Können Sie einfach den funktionierenden Demo-Link in Safari öffnen und sehen, ob er an Ihrem Ende funktioniert?

Rohit416

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
quelle

3

Genius! Ich habe dies verwendet, um ein versehentliches Auslösen der Schaltfläche "Zurück" zu verhindern, wenn der Benutzer in einer Web-App, in der "Zurück / Vorwärts" ohnehin keinen Sinn ergab, die Rücktaste (z. B. in deaktivierten / schreibgeschützten Feldern) drückt. Bestätigt deaktiviert die Vorwärts- und Rückwärtsfunktion (jedoch nicht die Schaltflächen selbst), einschließlich der Kontextmenüoption. verifiziert in IE8 bis IE11, Chrome & FF.

nichts ist notwendig

1

Dies funktioniert, setzt jedoch alle in Textfeldern eingegebenen Daten zurück. Ist es möglich, das Löschen zu verhindern?

Somnium

6

Es funktionierte für mich auf Firefox, aber nicht auf Chrom (Version 36.0.1985.143)

Baraber

Das hat auch bei mir window.history.back()funktioniert , aber bei Firefox scheint es die Funktion zu brechen . Wir möchten verhindern, dass Benutzer auf die Schaltfläche "Zurück" des Browsers klicken. In einigen Fällen stellen wir jedoch eine eigene Schaltfläche "Zurück" auf der Seite bereit. Gibt es eine Möglichkeit, es zum Laufen zu bringen?

AsGoodAsItGets

1

Das funktioniert bei mir nicht. Ich verwende Chrome Version 55 unter Windows 10. Ich habe das Skript an mehreren Stellen (Anfang des Headers, Ende des Körpers usw.) abgelegt und kann weiterhin die Schaltfläche "Zurück" verwenden, um zur vorherigen Seite zurückzukehren.

Victor Stoddard

72

Ich bin darauf gestoßen und brauchte eine Lösung, die auf einer Vielzahl von Browsern, einschließlich Mobile Safari (iOS9 zum Zeitpunkt der Veröffentlichung), korrekt und "gut" funktionierte. Keine der Lösungen war ganz richtig. Ich biete Folgendes an (getestet auf IE11, FireFox, Chrome & Safari):

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

Beachte das Folgende:

history.forward()(meine alte Lösung) funktioniert nicht auf Mobile Safari --- es scheint nichts zu tun (dh der Benutzer kann immer noch zurückgehen). history.pushState()funktioniert bei allen.
Das dritte Argument history.pushState()ist eine URL . Lösungen, die eine Zeichenfolge wie " OK" übergeben 'no-back-button'oder 'pagename'zu funktionieren scheinen, bis Sie dann versuchen, die Seite zu aktualisieren / neu zu laden. Zu diesem Zeitpunkt wird der Fehler "Seite nicht gefunden" generiert, wenn der Browser versucht, eine Seite mit dieser URL zu finden. (Der Browser wird diese Zeichenfolge wahrscheinlich auch in die Adressleiste auf der Seite aufnehmen, was hässlich ist.) location.hrefSollte für die URL verwendet werden.
Das zweite Argument history.pushState()ist ein Titel . Wenn Sie sich im Internet umschauen, sagen die meisten Orte, dass es "nicht verwendet" wird, und alle Lösungen hier gelten nulldafür. Zumindest in Mobile Safari wird dadurch die URL der Seite in die Verlaufs-Dropdown-Liste aufgenommen, auf die der Benutzer zugreifen kann. Wenn jedoch normalerweise ein Eintrag für einen Seitenbesuch hinzugefügt wird, wird der Titel eingegeben , was vorzuziehen ist. Das Bestehen document.titleführt also zum gleichen Verhalten.

JonBrave
quelle

3

Dies ist die richtige Antwort. Funktioniert perfekt unter Chrome, IE 11, Firefox und Edge.

Concept211

3

Dies sollte die akzeptierte Antwort sein, es ist plattformübergreifend und funktioniert einwandfrei.

Calbertts

in jsp sevlet Nach dem Senden aktualisiere ich die Seite. Seite nicht angezeigt (Fehler)

Madhuka Dilhan

Die bisher beste Lösung, funktioniert aber wahrscheinlich nicht in älteren Browsern

j4n7

2

Perfekte Lösung für moderne Browser. Ich habe mit @ Rohit416 Antwort kombiniert, um ältere Browser nur unter Verwendung der Bedingung typeof (history.pushState) zu unterstützen === "Funktion" funktioniert reibungslos.

Miklos Krivan

28

Dieser Code deaktiviert die Zurück-Schaltfläche für moderne Browser, die die HTML5-Verlaufs-API unterstützen. Unter normalen Umständen geht das Drücken der Zurück-Taste einen Schritt zurück zur vorherigen Seite. Wenn Sie history.pushState () verwenden, fügen Sie der aktuellen Seite zusätzliche Unterschritte hinzu. Wenn Sie history.pushState () dreimal verwenden, drücken Sie die Zurück-Taste, die ersten drei Male, in denen in diesen Unterschritten zurück navigiert wird, und das vierte Mal, wenn Sie zurückkehren die vorherige Seite.

Wenn Sie dieses Verhalten mit einem Ereignis-Listener für das popstateEreignis kombinieren , können Sie im Wesentlichen eine Endlosschleife von Unterzuständen einrichten. Sie laden also die Seite, drücken einen Unterzustand und drücken dann die Zurück-Taste, wodurch ein Unterzustand angezeigt wird und auch ein anderer gedrückt wird. Wenn Sie also die Zurück-Taste erneut drücken, gehen Ihnen nie die Unterzustände zum Drücken aus . Wenn Sie der Meinung sind, dass die Zurück-Taste deaktiviert werden muss, gelangen Sie dorthin.

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

Jeremy Warne
quelle

2

Versuchen Sie anschließend in jedem Browser, eine Seite zu aktualisieren / neu zu laden, und Sie werden auf den Fehler "Seite nicht gefunden" stoßen, da versucht wird, eine Seite mit dem Namen no-back-button... zu finden. (Der Browser wird wahrscheinlich auch no-back-buttonin der Adresse angezeigt Bar auch, was hässlich erscheint.) Um fair zu sein, ist dies hier nicht die einzige Lösung, die darunter leidet. Das dritte Argument für history.pushState()ist eine URL und muss die URL Ihrer aktuellen Seite sein: Verwenden Sie location.hrefstattdessen.

JonBrave

4

Das hat bei mir funktioniert. Ändern Sie einfach 'no-back-button' in "window.top.location.pathname + window.top.location.search" und es bleibt der Name der Seite, auf der Sie sich befinden, auch beim Aktualisieren

Steve

Dies hat unter anderem für mich funktioniert, upvote. Siehe stackoverflow.com/questions/19926641/… .

user2171669

Ich habe viele Fälle untersucht, und dies ist die beste Lösung für 1-seitige Website

DJDance

Dies ist eine sehr schlechte Lösung, da Sie die URL ändern. Wenn Sie also ein paar Mal hin und her drücken, wird Chrome auf einen Pfad umgeleitet, der nicht vorhanden ist

Tallboy

21

Für Restrict Browser back event

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

Fezal Halai
quelle

1

Dies funktioniert hervorragend auf Chrom!, Warum stimmen die Leute nicht ab, da dies die beste Antwort ist?

Tarık Seyceri

1

Ich habe es gerade unter Windows 10 in den folgenden Browsern getestet (funktioniert hervorragend). Chrome Version 74.0.3729.108 (Official Build) (64-Bit) Chrome Canary Version 76.0.3780.0 (Official Build) Canary (32-Bit) Chromium Version 66.0. 3355.0 (Developer Build) (64-Bit) Firefox 66.0.3 (64-Bit) EDGE IE 11 Safari 5.1.7

Tarık Seyceri

2

@ TarıkSeyceri, da dies nur in Browsern funktioniert, die a) die Verlaufs-API unterstützen b) die Seite tatsächlich die Verlaufs-API verwendet, um den Status zu verwalten

givanse

Funktioniert in Chrome nach Version 75 nicht mehr. Siehe: support.google.com/chrome/thread/8721521?hl=de

Gen b.

13

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

Eng Mahmoud El Torri
quelle

12

Obwohl dies eine gültige Antwort sein mag, helfen Sie anderen viel eher, indem Sie erklären, was der Code tut und wie er funktioniert. Nur-Code-Antworten erhalten tendenziell weniger positive Aufmerksamkeit und sind nicht so nützlich wie andere Antworten.

Aurora0001

Getestet auf Chrome, Firefox, IE und Edge. Es funktioniert gut. Du hast mich gerettet.

Nooovice Boooy

12

So könnte ich es erreichen. Das Fenster seltsam zu wechseln. Die Position in Chrom und Safari hat nicht gut funktioniert. Es passiert, dass die location.hash keinen Eintrag in der Geschichte für Chrome und Safari erstellt. Sie müssen also den Pushstate verwenden. Dies funktioniert bei mir in allen Browsern.

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

    };

Sanchitos
quelle

1

Das funktioniert in IE9 und darunter nicht, pushState wird nicht unterstützt.

Alex

Toll. Dies ist ein guter Ansatz und funktioniert in fast allen aktuellen Browsern.

Venugopal M

1

Funktioniert hervorragend in späteren IE's. Einfach direkt in das Dokument $(document).ready(function () { .... });

einfügen. Bereits

Denken Sie daran, dass Sie Ihre aktuelle URL vor "#nbb" hinzufügen müssen. dh "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
quelle

Gibt es irgendwo eine Dokumentation dafür event.persisted?

Muhd

1

Hier ist der Link für Ihre Frage. Finden Sie es hier @Muhd

rbashish

8

Dieser Artikel auf jordanhollinger.com ist die beste Option, die ich fühle. Ähnlich wie Razors Antwort, aber etwas klarer. Code unten; volle Credits an Jordan Hollinger:

Seite vor:

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

JavaScript der Seite ohne Rückgabe:

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

8

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

Mit diesem Javascript kann kein Benutzer zurückkehren (funktioniert in Chrome, FF, IE, Edge).

Surajit Mitra
quelle

5

Probieren Sie es mit Leichtigkeit aus:

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

Lakhan
quelle

5

Dieser Code wurde mit den neuesten Chrome- und Firefox-Browsern getestet.

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

Franklin Innocent F.
quelle

Willkommen huyhoang.

Franklin Innocent F

3

Sehr einfache und saubere Funktion, um den Pfeil nach hinten zu brechen, ohne die Seite danach zu stören.

Leistungen:

Wird sofort geladen und stellt den ursprünglichen Hash wieder her, sodass der Benutzer nicht durch sichtbare URL-Änderungen abgelenkt wird.
Der Benutzer kann den Vorgang weiterhin beenden, indem er 10 Mal zurückdrückt (das ist eine gute Sache), jedoch nicht versehentlich
Keine Benutzereingriffe wie bei anderen Lösungen onbeforeunload
Es wird nur einmal ausgeführt und stört weitere Hash-Manipulationen nicht, falls Sie dies zum Verfolgen des Status verwenden
Stellt den ursprünglichen Hash wieder her, also fast unsichtbar.
Wird verwendet, setIntervaldamit langsame Browser nicht beschädigt werden und immer funktioniert.
Pure Javascript benötigt keinen HTML5-Verlauf und funktioniert überall.
Unauffällig, einfach und spielt gut mit anderem Code.
Verwendet nicht, unbeforeunloadwas den Benutzer mit dem modalen Dialog unterbricht.
Es funktioniert einfach ohne viel Aufhebens.

Hinweis: Einige der anderen Lösungen verwenden onbeforeunload. Bitte nicht verwendet onbeforeunloadfür diesen Zweck, die einen Dialog erscheint , wenn Benutzer versuchen , das Fenster, Hit backarrow zu schließen usw. Modalverben wie onbeforeunloadsind in der Regel nur in seltenen Umständen angemessen, wie wenn sie haben tatsächlich Änderungen auf dem Bildschirm und haven‘ Ich habe sie nicht zu diesem Zweck gespeichert.

Wie es funktioniert

Wird beim Laden der Seite ausgeführt
Speichert Ihren ursprünglichen Hash (falls einer in der URL enthalten ist).
Hängt nacheinander # / noop / {1..10} an den Hash an
Stellt den ursprünglichen Hash wieder her

Das ist es. Kein weiteres Herumspielen, keine Überwachung von Hintergrundereignissen, sonst nichts.

Verwenden Sie es in einer Sekunde

Fügen Sie dies zum Bereitstellen einfach an einer beliebigen Stelle auf Ihrer Seite oder in Ihrem JS hinzu:

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

fataler Fehler
quelle

2

Dies scheint für uns beim Deaktivieren der Zurück-Schaltfläche im Browser sowie der Rücktaste, die Sie zurückbringt, funktioniert zu haben.

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

jgabb
quelle

1

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

user3789888
quelle

1

Sie können und sollten dies einfach nicht tun. Dies könnte jedoch hilfreich sein

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

Funktioniert in meinem Chrom und Firefox

Shailendra Sharma
quelle

1

Versuchen Sie dies, um eine Rücktaste im IE zu verhindern, die standardmäßig als "Zurück" fungiert:

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

1

Ich glaube, die perfekte und doch perfekte Lösung ist eigentlich ziemlich einfach, die ich seit vielen Jahren verwende.

Grundsätzlich wird das Ereignis "onbeforeunload" des Fensters zusammen mit den laufenden Ereignissen "mouseenter" / "mouseleave" des Dokuments zugewiesen, sodass die Warnung nur ausgelöst wird, wenn Klicks außerhalb des Dokumentbereichs liegen (dies kann entweder die Schaltfläche "Zurück" oder "Vorwärts" des Browsers sein).

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

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

Abdelqoddous Rifai
quelle

1

In einem modernen Browser scheint dies zu funktionieren:

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

1

Ich bin mir nicht sicher, was passiert ist, aber aus irgendeinem Grund habe ich diese Antwort auf einem anderen Computer abgelehnt. Nur Sie wissen zu lassen, dass dies nicht meine Absicht war, aber ich kann die Abstimmung nicht mehr rückgängig machen: /

Lennard Fonteijn

Keine Gefühle schaden @LennardFonteijn :)

Joakim L. Christiansen

1

Keine der am häufigsten bewerteten Antworten hat in Chrome 79 für mich funktioniert . Es sieht so aus, als hätte Chrome sein Verhalten in Bezug auf die Schaltfläche "Zurück" nach Version 75 geändert. Siehe hier:

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

In diesem Google-Thread hat die Antwort von Azrulmukmin Azmi am Ende jedoch funktioniert. Das ist seine Lösung.

<script>

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

</script>

Das Problem mit Chrome ist, dass es kein onpopstate-Ereignis auslöst, es sei denn, Sie führen eine Browseraktion durch (dh rufen Sie history.back auf). Deshalb habe ich diese zum Skript hinzugefügt.

Ich verstehe nicht ganz, was er geschrieben hat, aber anscheinend history.back() / history.forward()ist jetzt eine zusätzliche erforderlich, um Back in Chrome 75+ zu blockieren.

Gen b.
quelle

Nach der Suche nach High & Low funktionierte dies schließlich auch in Android-Browsern, in denen aus irgendeinem Grund das Ereignis "Zurück" des Browsers bei keinem anderen Skript, das ich ausprobiert habe, erkannt wurde. Danke, danke, nochmals vielen Dank! Getestet und funktioniert gut unter Chrome 83, sowohl auf dem Desktop als auch auf dem Handy! Gene, du bist ein Lebensretter!

Ivan

0

Ich erstelle eine HTML-Seite (index.html). Ich erstelle auch eine Eins (mechanism.js) in einem (Skript-) Ordner / Verzeichnis. Dann lege ich meinen gesamten Inhalt innerhalb von (index.html) mit Formular-, Tabellen-, Span- und Div-Tags nach Bedarf. Hier ist der Trick, mit dem das Vor- und Zurückschalten nichts bewirkt!

Erstens die Tatsache, dass Sie nur eine Seite haben! Zweitens die Verwendung von JavaScript mit span / div-Tags, um Inhalte auf derselben Seite bei Bedarf über reguläre Links auszublenden und anzuzeigen!

Innerhalb von '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>

Innerhalb von 'mechanismus.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;
    }

Es sieht haarig aus, beachten Sie jedoch die Funktionsnamen und Aufrufe, das eingebettete HTML und die Aufrufe der span-Tag-ID. Dies sollte zeigen, wie Sie unterschiedlichen HTML-Code in dasselbe Span-Tag auf derselben Seite einfügen können! Wie kann sich Zurück / Vorwärts auf dieses Design auswirken? Dies ist nicht möglich, da Sie Objekte verstecken und andere auf derselben Seite ersetzen!

Wie verstecke und zeige ich? Hier geht's: Verwenden Sie in Funktionen in 'mechanism.js' nach Bedarf Folgendes:

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

Innerhalb von 'index.html' rufen Funktionen über Links auf:

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

und

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

Ich hoffe, ich habe dir keine Kopfschmerzen bereitet. Entschuldigung, wenn ich das getan habe :-)

hacker1033
quelle

0

In meinem Fall war dies eine Bestellung. Also habe ich den Button deaktiviert. Als der Benutzer zurückklickte, war die Schaltfläche weiterhin deaktiviert. Wenn sie noch einmal zurückklickten und dann auf eine Seitenschaltfläche klickten, um fortzufahren. Ich wusste, dass ihre Bestellung eingereicht und auf eine andere Seite gesprungen wurde.

In dem Fall, in dem die Seite tatsächlich aktualisiert wurde, wodurch die Schaltfläche (theoretisch) verfügbar würde; Ich konnte dann beim Laden der Seite reagieren, dass die Bestellung bereits übermittelt wurde und dann auch umleiten.

Valamas
quelle

0

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

Kamlesh
quelle

3

1. Das von javascript:Ihnen geschriebene definiert ein JavaScript- Label mit dem Namen "Javascript". Ich bezweifle sehr, dass Sie das beabsichtigt haben; Ich vermute, Sie verwechseln sich href=javascript:...mit JavaScript- <script>Blöcken. 2. hat language="JavaScript"aufgehört, ein gültiges <script>Attribut bei HTML5 zu sein. 3. Die obigen 2 Punkte sind nicht wichtig. Was wichtig ist, ist, dass history.forward(1)dies in Mobile Safari (zumindest) nicht funktioniert. Verwenden Sie history.pushState()stattdessen eine der Antworten.

JonBrave

0

Sie können einfach ein kleines Skript einfügen und dann überprüfen. Sie können die vorherige Seite nicht besuchen. Dies geschieht in Javascript.

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

Die Funktion window.onunload wird ausgelöst, wenn Sie versuchen, die vorherige oder vorherige Seite über den Browser aufzurufen.

Hoffe das hilft.

noobprogrammer
quelle

0

Ich hatte dieses Problem mit React.JS. (Klassenkomponente)

Und leicht zu lösen

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

Ich habe verwendet HashRouteraus react-router-dom.

Oo
quelle

0

Einfach einstellen location.hash="Something": Beim Drücken der Zurück-Taste wird der Hash aus der URL entfernt, aber die Seite wird nicht zurückgesetzt. Diese Methode ist gut, um ein versehentliches Zurückkehren zu verhindern. Aus Sicherheitsgründen sollten Sie Ihr Backend so gestalten, dass eine erneute Beantwortung verhindert wird

Abhishek
quelle

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

1 Holen Sie sich das Ereignisobjekt 2., um den Ereignisquellentyp als Beurteilungsbedingung zu bestimmen. 3.Wenn der Treffer Rücktaste, der Ereignisquellentyp für das Kennwort oder Single und die Eigenschaft readonly auf true oder enabled false falsch ist, schlägt der Backspace-Schlüssel fehl. Wenn Sie die Rücktaste drücken, ist die Quelle des Ereignisses das Kennwort oder die einzelne, der Fehler der Rücktaste

Chauncey.Zhong

Die Frage bezieht sich auf die Verwendung der Zurück-Navigationstaste und nicht auf die Rücktaste.

Quentin

So stoppen Sie die Zurück-Schaltfläche des Browsers mit Javascript

Antworten:

Empfohlenes Setup: