So erstellen Sie einen HTML-Zurück-Button

So erstellen Sie einen HTML-Zurück-Button

Sie können Ihrer Webseite einen Zurück-Button hinzufügen. Wenn ein Besucher Ihrer Seite auf die Schaltfläche klickt, wird er zur zuletzt besuchten Seite weitergeleitet, als ob er in seinem Browser auf die Zurück-Schaltfläche geklickt hätte.

Sie können dies erreichen, indem Sie den HTML-Code Ihrer Seite bearbeiten und ein wenig JavaScript hinzufügen.

Notiz

Diese Schaltflächen funktionieren nicht, wenn der Benutzer keinen Browserverlauf hat. Wenn der Benutzer beispielsweise Ihre Seite in einem neuen Browser-Tab oder -Fenster öffnet, passiert nichts, wenn er auf die Schaltfläche klickt.

Verwendung von history.back

In einem Webbrowser verfügt das integrierte JavaScript-Objektfenster über ein Objekt namens Verlauf, das die URLs enthält, die ein Benutzer in seinem aktuellen Browserfenster besucht hat. Sie können die Methode history.back() verwenden, um den Browser anzuweisen, zur vorherigen Seite des Benutzers zurückzukehren.

Eine Möglichkeit, dieses JavaScript zu verwenden, besteht darin, es dem onclick-Ereignisattribut einer Schaltfläche hinzuzufügen. Hier erstellen wir die Schaltfläche mit einem

-Element, das ein -Element vom Typ Schaltfläche enthält.

Fügen Sie den folgenden HTML-Code in Ihre Webseite ein:

<form>
 <input type="button" value="Go back!" onclick="history.back()">
</form>

Das Ergebnis sieht wie die Schaltfläche unten aus. Wenn Sie darauf klicken, kehren Sie zur vorherigen Seite in Ihrem Verlauf zurück.

Verwendung von history.go

Die Methode history.go() weist den Browser an, zu einer bestimmten Seite im Browserverlauf des Benutzers zu wechseln. Sie können das Verlaufselement angeben, indem Sie eine Zahl in die Klammern einfügen. Bei der Computerprogrammierung wird dies als Argument bezeichnet.

Wenn Sie als Argument die Zahl -1 angeben, geht der Browser im Browserverlauf eine Seite zurück. Hier ist derselbe Code wie oben, wobei history.go(-1) anstelle von history.back() verwendet wird.

<form>
 <input type="button" value="No, really, go back!" onclick="history.go(-1)">
</form>

Neueste Artikel
Vielleicht möchten Sie lesen

LEAVE A REPLY

Please enter your comment!
Please enter your name here