Code

So verwalten Sie die Zurück-Schaltfläche mit JavaScript

Ein Hauptproblem bei JavaScript-basierten Anwendungen besteht darin, dass sie die Zurück-Schaltfläche unterbrechen. Wenn Sie den Inhalt auf der Seite mit JavaScript aktualisieren, statt eine neue Seite vom Server zu laden, wird kein Eintrag im Browserverlauf angezeigt. Wenn der Benutzer also auf Zurück klickt und erwartet, dass er in den vorherigen Zustand zurückkehrt, landen sie stattdessen auf der vorherigen Website.

Ziehen und Ablegen ist eine großartige Möglichkeit für Benutzer, mit Ihren Webanwendungen zu interagieren. Aber die Usability-Gewinne gehen verloren, wenn Benutzer nach dem Durchlaufen der Anwendung auf die Zurück-Schaltfläche klicken, um eine Seite zurückzugehen und stattdessen zu ihrem Startbildschirm zurückzukehren. In diesem Artikel "Hallo! HTML5 & CSS3 "Autor Rob Crowther zeigt Ihnen, wie Sie die HTML5-History-API verwenden, um dieses Schicksal zu vermeiden.

Das Problem kann einfach demonstriert werden. Sie benötigen lediglich eine Funktion, die die Seite als Reaktion auf Benutzeraktivitäten aktualisiert: 

var times = 0;function doclick() {times++;document.getElementById('message').innerHTML ='Recorded ' + times + ' clicks';}

und ein kleines Markup: 

Click Me
Recorded 0 clicks

Im wirklichen Leben würde Ihre Webseite etwas komplizierteres tun, wie das Holen neuer Inhalte vom Server über AJAX, aber ein einfaches Update reicht aus, um das Konzept zu demonstrieren. Mal sehen, was passiert, wenn der Benutzer die Seite besucht.

  1. Der Benutzer beginnt auf seiner Startseite und entscheidet sich, die erstaunliche Click Me-Anwendung zu besuchen, von der er gehört hat.
  2. Sie geben die URL ein oder folgen einem Link von einer E-Mail, um zur Click Me-Seite zu gelangen.
  3. Nach ein paar Sekunden angenehmer Interaktion hat sich der Seitenstatus mehrmals geändert.
  4. Wenn der Benutzer jedoch im Browser auf die Schaltfläche Zurück klickt, stellt er fest, dass er statt zu einem vorherigen Seitenstatus auf seine Startseite springt.

Die Funktion doclick () kann aktualisiert werden, um die History-API zu nutzen. Jedes Mal, wenn die Seite aktualisiert wird, wird auch die location.hash gesetzt: 

function doclick() {times++;location.hash = times;document.getElementById('message').innerHTML ='Recorded ' + times + ' clicks';}
  1. Der Benutzer erreicht die Click Me-Seite wie zuvor.
  2. Beachten Sie, dass jetzt die URL nach jedem Klick aktualisiert wird - am Ende steht "#".
  3. Wenn Sie auf die Schaltfläche Zurück klicken, wird der Standort wieder auf Platz 2 zurückgesetzt. Dies zeigt, dass die Seitenstatus erfolgreich zum Verlauf hinzugefügt wurden. Beachten Sie jedoch, dass beim Klicken auf die Schaltfläche Zurück die Seite nicht automatisch in den vorherigen Zustand zurückversetzt wird.

Aktualisieren des Seitenstatus

Die Aktualisierung der Historie ist nur ein Teil des Problems; Außerdem müssen Sie in der Lage sein, den Status der Seite so zu aktualisieren, dass sie dem Status im Verlauf entspricht.

Da Sie den Verlauf verwalten, liegt es an Ihnen, den Seitenstatus zu verwalten. Um Ihre Seite zu aktualisieren, nachdem location.hash geändert wurde, können Sie das hashchange-Ereignis anhören: 

function doclick() {times++;location.hash = times;}window.onhashchange = function() {if (location.hash.length > 0) {times = parseInt(location.hash.replace('#',''),10);} else {times = 0;}document.getElementById('message').innerHTML ='Recorded ' + times + ' clicks';}

Die Funktion doclick () ist jetzt nur dafür verantwortlich, die Variable time zu aktualisieren und den Hash zu ändern. Das Hashchange-Ereignis befindet sich auf dem Fensterobjekt. Wenn es stattfindet, überprüfen Sie, ob der Hash existiert. In einer realen Anwendung sollten Sie auch überprüfen, ob es einen gültigen Wert hat. Als nächstes setzen Sie den Wert der Zeiten als Zahl im Hash. Schließlich aktualisieren Sie das Dokument, um den richtigen Seitenstatus wiederzugeben. Schauen wir uns diesen neuen Code an:

  1. Wie zuvor wird der Hash in der URL aktualisiert, wenn der Benutzer klickt.
  2. Wenn Sie jetzt auf die Schaltfläche Zurück klicken, wird die Funktion onhashchange ausgelöst, und der Seitenstatus wird zurückgesetzt, damit er der URL entspricht.

Verwenden von location.hash

Die Eigenschaft "location.hash" und das zugehörige Ereignis "hashchange" sind nützlich, wenn Sie bestimmte Ansichten Ihrer Anwendung markieren und dem Benutzer erlauben möchten, zwischen diesen zu wechseln. Google Mail verwendet diesen Ansatz, indem Sie zwischen Ihrem Posteingang (#inbox), Kontakten (#contacts) und anderen Ansichten wechseln können. Wenn Sie ein Google Mail-Konto haben, sehen Sie, was mit der URL passiert, wenn Sie zu verschiedenen Seiten navigieren dann klicke zurück.

Aber so weit wie State-Informationen gehen, lässt der Hash nur Sie eine Zeichenfolge speichern. Sie könnten ein komplexeres Objekt kodieren, aber die URL würde schnell lang und unhandlich werden und wäre für Ihre Benutzer nicht denkwürdig. Wenn Sie komplexere Informationen benötigen, die als Teil des Verlaufs gespeichert werden, wäre ein besserer Ansatz, den Hash als Schlüssel zu verwenden, um weitere Statusinformationen aus einem Speicher zu ziehen. Obwohl Sie Ihren eigenen Ansatz dazu verwenden könnten, hat HTML5 eine API zur Verfügung gestellt, die es für Sie über die Methode history.pushState () und das Ereignis popstate ausführt. Mit diesen Methoden können Sie ein komplexes Objekt speichern und erneut laden.

Zusammenfassung

Sie haben gelernt, dass die Verwaltung des Browserverlaufs Ihnen ermöglicht, die Zurück-Schaltfläche im Kontext Ihrer Anwendung sinnvoller zu gestalten, während die Mikrodaten-API Ihnen den Zugriff auf strukturierte semantische Informationen in Seiteninhalten ermöglicht.

Welche Anwendungen sehen Sie für diese Technik? Hast du eine andere Methode entwickelt? Lassen Sie es uns in den Kommentaren wissen.

Ausgewähltes Bild / Vorschaubild, gehe zurück Bild über Shutterstock.

Javascript-Anwendungen Zurück-Button Hallo html5 & css Geschichte api rob Kröther