So verwenden Sie JavaScript, um die Back-Funktion zu implementieren

PHPz
Freigeben: 2023-04-25 14:02:47
Original
1977 Leute haben es durchsucht

JavaScript ist eine Skriptsprache, die häufig bei der Entwicklung von Webanwendungen und Websites verwendet wird. Dabei sind die Funktionen der Benutzeroberfläche von entscheidender Bedeutung, darunter auch die Funktionalität des „Zurück“-Buttons. Das Verlaufsobjekt wird in HTML5 bereitgestellt, wodurch die Vor- und Zurück-Funktionen problemlos implementiert werden können. In diesem Artikel wird erläutert, wie Sie die Back-Funktion mithilfe von JavaScript implementieren.

1. Verwenden Sie die Methode „history.back()“

history.back(), um zum vorherigen Datensatz im Zugriffsverlauf des Benutzers zu navigieren. Wenn Benutzer beispielsweise die Suchfunktion verwenden, klicken sie möglicherweise auf einige Links und möchten dann zur vorherigen Seite zurückkehren, um Änderungen vorzunehmen. In diesem Fall können Sie die Methode History.back() verwenden.

So verwenden Sie:

history.back();
Nach dem Login kopieren

Dadurch kehren Sie zur vorherigen Seite zurück. Wenn die Seite, die der Benutzer ursprünglich besuchte, eine Suchergebnisseite war, wird die Seite vor der Suche zurückgegeben. Dies liegt daran, dass das Verlaufsobjekt den Zugriffsverlauf des Benutzers speichert.

2. Verwenden Sie „history.go()“

Die Methode „history.go()“ kann auch zum Navigieren zur vorherigen Seite verwendet werden. Der Unterschied zu „history.back()“ besteht jedoch darin, dass Sie angeben können, wie oft Datensätze zurückgegeben werden sollen . Wenn der Benutzer beispielsweise zur dritten Seite zurückkehren möchte, die er zuvor angezeigt hat, kann er den folgenden Code verwenden:

history.go(-2);
Nach dem Login kopieren

Dadurch wird die drittletzte Seite zurückgegeben. Wenn ein Benutzer versucht, zu drei Seiten zurückzukehren, während er weniger als drei Seiten besucht hat, wird der älteste Datensatz zurückgegeben.

3. Verwenden Sie window.location.href

Eine andere Methode besteht darin, das Standortobjekt zu verwenden, um zur vorherigen Seite zurückzukehren. Verwenden Sie die Eigenschaft window.location.href, um die URL der aktuellen Seite abzurufen und sie dann zur URL der vorherigen Seite umzuleiten. Ein Codebeispiel für diesen Ansatz lautet wie folgt:

window.location.href = document.referrer;
Nach dem Login kopieren

Verwenden Sie die Eigenschaft document.referrer, um die URL der vorherigen Seite abzurufen, und leiten Sie dann window.location.href zur vorherigen Seite um.

Zusammenfassung

Die oben genannten drei Methoden können Ihnen bei der Implementierung der „Zurück“-Schaltflächenfunktion in JavaScript-Anwendungen und Websites helfen. Verwenden Sie eine dieser Methoden, um einfach zum Benutzerverlauf zurückzukehren und das Benutzererlebnis zu verbessern.

Es ist jedoch wichtig zu beachten, dass Sie, wenn Ihre Website oder Anwendung eine Single-Page-Application-Architektur (SPA) verwendet, möglicherweise die Router-Funktionalität eines Front-End-Frameworks verwenden müssen, um Vor- und Rückwärtsfunktionen zu implementieren, wie z. B. Vue Router oder React Router. Dies liegt daran, dass in SPA der Seitenwechsel über den Front-End-Router und nicht über den Browserverlauf verwaltet wird.

Berücksichtigen Sie bei der Implementierung einer Zurück-Schaltfläche das Benutzererlebnis und stellen Sie sicher, dass die Implementierungsmethode den Anforderungen Ihrer App oder Website entspricht.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie JavaScript, um die Back-Funktion zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage