Erstellen einen Zurück-Button in einer Webseite mit JavaScript
- Die Zurück-Schaltfläche in HTML
- Erstellen einer Zurück-Button in HTML mit JavaScript
-
Verwenden Sie die Methode
history.back(), um den Zurück-Button in JavaScript zu erstellen -
Verwenden Sie die Methode
history.go(), um den Zurück-Button in JavaScript zu erstellen
In diesem JavaScript-Artikel erfahren Sie, wie Sie mit JavaScript eine Zurück-Schaltfläche erstellen und wie Sie die Zurück-Schaltfläche in HTML benötigen und verwenden. Wir werden sehen, wie Sie die vorherige Seite mithilfe der integrierten Methoden von JavaScript erhalten.
Die Zurück-Schaltfläche in HTML
Die von uns verwendeten Browser haben bereits Zurück-Buttons, also müssen Sie einen besseren Grund haben, den Zurück-Button auf Ihrer Seite zu platzieren. Wir können auf einer Webseite mit HTML- oder JavaScript-Code einen Zurück-Button hinzufügen.
Die Webseite hat eine Schaltfläche oder einen Link, und durch Anklicken kehrt der Browser zur vorherigen Seite zurück. Dies kann mit HTML-Code und ein wenig JavaScript auf der Client-Seite erfolgen.
Erstellen einer Zurück-Button in HTML mit JavaScript
Der Code zum Erstellen eines HTML-Zurück-Buttons kann an beliebiger Stelle innerhalb der Seite platziert werden. Der von uns erstellte Zurück-Button funktioniert genauso wie der Zurück-Button in der Symbolleiste unseres Browsers.
Denken Sie daran, dass dieser Zurück-Button nicht funktioniert, wenn der Benutzer keinen Browserverlauf hat. Es passiert nichts, wenn der Benutzer die Webseite öffnet und auf den Zurück-Button klickt.
Verwenden Sie die Methode history.back(), um den Zurück-Button in JavaScript zu erstellen
Wir haben ein eingebautes JavaScript-Objekt namens Verlauf in Webbrowsern, das alle URLs enthält, die ein Benutzer im aktuellen Browserfenster besucht hat. Wir können diese history.back()-Methode verwenden, um den Webbrowser anzuweisen, zur vorherigen Seite des Benutzers zurückzukehren. Um dieses integrierte JavaScript-Objekt zu verwenden, müssen Sie es dem onclick-Ereignisattribut einer Schaltfläche hinzufügen. Wir erstellen die Schaltfläche mit dem Element <form>, das das Element <input> des Schaltflächentyps enthält, wie wir im folgenden Code sehen.
Code - HTML:
<!DOCTYPE html>
<html>
<head>
<title>Back Button</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h3 class="title">Creating Back Button </h3>
<form>
<input type="button" value="Go back!" onclick="history.back()">
</form>
</body>
</html>
Ausgabe:
-method.webp)
Wenn ein Benutzer auf die Schaltfläche klickt, kehrt der Benutzer zur vorherigen Seite im Browser zurück.
Verwenden Sie die Methode history.go(), um den Zurück-Button in JavaScript zu erstellen
Wenn wir im Browser zu der bestimmten Seite zurückkehren möchten, verwenden wir die Methode history.go(). Diese eingebaute JavaScript-Methode weist den Browser an, zu einer bestimmten Seite im Browserverlauf zu gehen.
Wir können jede spezifische Historie angeben, indem wir eine Zahl in die Klammern setzen, die wir in der Programmierung als Argument bezeichnen. Durch Angabe der Zahl -1 als Argument in Klammern geht der Browser beispielsweise eine Seite im Browserverlauf zurück.
Im folgenden Code haben wir die Methode history.go(-1) anstelle der Methode history.back() verwendet. Wir können den Browser sogar bitten, mehr als 1 Schritt vor oder zurück zu gehen, indem wir die Zahl -2 als Argument in Klammern wie diese history.go(-2) angeben.
Code - HTML:
<!DOCTYPE html>
<html>
<head>
<title>Back Button</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h3 class="title">Creating Back Button </h3>
<form>
<INPUT TYPE="button" VALUE="Go one step back" onClick="history.go(-1);">
</form>
<br>
<form>
<INPUT TYPE="button" VALUE="Go two steps back" onClick="history.go(-2);">
</form>
</body>
</html>
Ausgabe:
-method.webp)
Aus den Ergebnissen im obigen Bild haben wir zwei Schaltflächen. Wenn ein Benutzer auf die erste Schaltfläche klickt, geht der Browser im Browserverlauf eine Seite zurück, und wenn der Benutzer auf die zweite Schaltfläche klickt, geht der Browser zwei Seiten im Browserverlauf zurück.
Der Hauptunterschied zwischen der history.back()- und der history.go()-Methode besteht darin, dass die back()-Methode nur eine Seite zurückgeht, aber go() die Anzahl der Seiten vor- und zurückgeht, die wir haben als Parameter in Klammern relativ zu unserer aktuellen Webseite übergeben.
My name is Abid Ullah, and I am a software engineer. I love writing articles on programming, and my favorite topics are Python, PHP, JavaScript, and Linux. I tend to provide solutions to people in programming problems through my articles. I believe that I can bring a lot to you with my skills, experience, and qualification in technical writing.
LinkedIn