Lösung dafür, dass die JavaScript-Zurück-Schaltfläche nicht funktioniert

In der täglichen Webentwicklung stoßen wir häufig auf Situationen, in denen wir den Zurück-Button der Seite deaktivieren müssen. Dies verhindert, dass Benutzer die Zurück-Funktion des Browsers auf Webseiten nutzen, und schützt so die Sicherheit und Stabilität von Webseiten. Wenn wir JavaScript zur Implementierung dieser Funktion verwenden, kann es vorkommen, dass die Zurück-Schaltfläche nicht verfügbar ist. Als nächstes erklären wir, wie Sie dieses Problem lösen können.

1. Ursache des Problems

Das Deaktivieren der Zurück-Schaltfläche des Browsers in JavaScript wird normalerweise durch Bedienen des Browserverlaufs erreicht. Die Zurück-Schaltfläche wird deaktiviert, wenn die folgenden beiden Methoden ausgeführt werden:

history.forward()
history.back()

In einigen Fällen können diese Methoden die Zurück-Schaltfläche jedoch nicht deaktivieren. Normalerweise tritt diese Situation in den folgenden zwei Situationen auf:

1. Die aktuelle Seite ist ein Formular, das über die HTTP-POST-Methode übermittelt wird, und das Formular enthält eine große Datenmenge.
2. In der laufenden Umgebung der Webseite wird der Code so schnell ausgeführt, dass der Browser bei Ausführung der Methode „history.forward()“ oder „history.back()“ nicht rechtzeitig auf diese Vorgänge reagiert.

2. Lösung

Für die beiden oben genannten Situationen können wir die folgenden Lösungen wählen.

1. Realisieren Sie die Zurück-Funktion, indem Sie die URL ändern.

Wir können die Zurück-Funktion implementieren, indem wir der URL der Seite eine bestimmte Kennung hinzufügen. Wenn der Benutzer auf die Schaltfläche „Zurück“ klickt, müssen wir nur das Popstate-Ereignis des Fensterobjekts abhören und feststellen, ob die URL diese Kennung enthält, um festzustellen, ob der Benutzer zurückkehren muss. Der Code lautet wie folgt:

window.addEventListener('popstate', function(event) {
    if (event.state && event.state.isBack) {
        // 执行后退操作
    }
});

var state = {
    isBack: true
};

history.pushState(state, '', '#back');

Im obigen Code hören wir zuerst auf das Popstate-Ereignis des Fensterobjekts. Wenn das Ereignis ausgelöst wird, stellen wir fest, ob das Event.State-Objekt das Feld isBack enthält die Rückenoperation. Wenn wir die Zurück-Schaltfläche deaktivieren müssen, müssen wir nur die Methode „history.pushState()“ aufrufen und ein Statusobjekt mit einer Kennung hinzufügen, wo es deaktiviert werden muss.

2. Realisieren Sie „Zurück“, indem Sie die Methode „onbeforeunload“ des Fensterobjekts ändern.

Wir können die Zurück-Schaltfläche auch deaktivieren, indem Sie die Methode „onbeforeunload“ des Fensterobjekts überschreiben. Wenn der Benutzer auf die Schaltfläche „Zurück“ klickt, öffnet der Browser ein Bestätigungsfeld, da die Methode „onbeforeunload“ überschrieben wird. Zu diesem Zeitpunkt kann der Benutzer nur auf der aktuellen Seite bleiben, indem er im Bestätigungsfeld „Auf dieser Seite bleiben“ auswählt. Der Code lautet wie folgt:

window.onbeforeunload = function() {
    return "是否离开当前页面？";
}

Im obigen Code überschreiben wir die onbeforeunload-Methode des Fensterobjekts und geben ein Bestätigungsfeld zurück. Wenn der Benutzer auf die Schaltfläche „Zurück“ klickt, öffnet der Browser das Bestätigungsfeld. Da der Benutzer nur durch Auswahl von „Auf dieser Seite bleiben“ auf der aktuellen Seite bleiben kann, wird die Schaltfläche „Zurück“ ungültig.

Zusammenfassung:

Deaktivieren Sie die Zurück-Schaltfläche Ihres Browsers. In einigen Fällen kann es vorkommen, dass das Problem auftritt, dass die Zurück-Schaltfläche nicht verfügbar ist. Wir können dieses Problem lösen, indem wir die URL ändern oder die Methode onbeforeunload überschreiben. Wenn wir die Zurück-Schaltfläche deaktivieren müssen, müssen wir nur die entsprechende Methode dort aufrufen, wo sie deaktiviert werden muss.

Das obige ist der detaillierte Inhalt vonLösung dafür, dass die JavaScript-Zurück-Schaltfläche nicht funktioniert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!