Κώδικας

Πώς να διαχειριστείτε το κουμπί πίσω με το JavaScript

Ένα σημαντικό πρόβλημα με εφαρμογές που βασίζονται στο JavaScript είναι ότι σπάζουν το κουμπί Back. Εάν ενημερώσετε περιεχόμενο στη σελίδα με JavaScript αντί να φορτώσετε μια νέα σελίδα από το διακομιστή, δεν υπάρχει καμία καταχώρηση στο ιστορικό του προγράμματος περιήγησης. οπότε όταν ο χρήστης κάνει κλικ στο κουμπί "Πίσω" και αναμένει να επιστρέψει στην προηγούμενη κατάσταση, καταλήγει στην προηγούμενη τοποθεσία.

Η μεταφορά και απόθεση είναι ένας πολύ καλός τρόπος για τους χρήστες να αλληλεπιδρούν με τις εφαρμογές ιστού σας. Όμως, τα κέρδη χρηστικότητας θα χαθούν εάν, μετά το πέρασμα του χρόνου που διανύει η εφαρμογή σας, οι χρήστες κάνουν κλικ στο κουμπί "Πίσω" αναμένοντας να επιστρέψουν μια σελίδα και να επιστρέψουν στην αρχική τους οθόνη. Σε αυτό το άρθρο "Γεια σας! HTML5 & CSS3 "ο συντάκτης Rob Crowther σάς δείχνει πώς να χρησιμοποιήσετε το API ιστορικού HTML5 για να αποφύγετε αυτή τη μοίρα.

Το πρόβλημα μπορεί να αποδειχθεί απλά. Το μόνο που χρειάζεστε είναι μια λειτουργία που ενημερώνει τη σελίδα ως απάντηση στη δραστηριότητα των χρηστών: 

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

και μια μικρή σήμανση: 

Click Me
Recorded 0 clicks

Στην πραγματική ζωή, η ιστοσελίδα σας θα κάνει κάτι πιο περίπλοκο, όπως η ανάκτηση νέου περιεχομένου από το διακομιστή μέσω του AJAX, αλλά μια απλή ενημέρωση αρκεί για να αποδείξει την ιδέα. Ας δούμε τι συμβαίνει όταν ο χρήστης επισκέπτεται τη σελίδα.

  1. Ο χρήστης ξεκινά στην αρχική του σελίδα και αποφασίζει να επισκεφτεί την καταπληκτική εφαρμογή Click Me, την οποία άκουσα.
  2. Πληκτρολογούν στη διεύθυνση URL ή ακολουθούν έναν σύνδεσμο από ένα μήνυμα ηλεκτρονικού ταχυδρομείου για να φτάσουν στη σελίδα "Κάντε κλικ σε".
  3. Μετά από μερικά δευτερόλεπτα ευχάριστης αλληλεπίδρασης, η κατάσταση σελίδας έχει αλλάξει αρκετές φορές.
  4. Αλλά όταν ο χρήστης κάνει κλικ στο κουμπί "Πίσω" στο πρόγραμμα περιήγησης, διαπιστώνει ότι αντί να επιστρέφει σε κατάσταση προηγούμενης σελίδας, μεταβαίνει στην αρχική του σελίδα.

Η λειτουργία doclick () μπορεί να ενημερωθεί για να εκμεταλλευτεί το API ιστορικού. Κάθε φορά που ενημερώνεται η σελίδα, θα οριστεί επίσης το location.hash: 

function doclick() {times++;location.hash = times;document.getElementById('message').innerHTML ='Recorded ' + times + ' clicks';}
  1. Ο χρήστης φτάνει στη σελίδα Click Me όπως πριν.
  2. Παρατηρήστε ότι τώρα η διεύθυνση URL ενημερώνεται μετά από κάθε κλικ - "#" εμφανίστηκε στο τέλος της.
  3. Κάνοντας κλικ στο κουμπί Πίσω παίρνει την θέση πίσω στο # 2, δείχνοντας ότι οι καταστάσεις σελίδας έχουν προστεθεί με επιτυχία στο ιστορικό. Αλλά σημειώστε ότι κάνοντας κλικ στο κουμπί Πίσω δεν επιστρέφει αυτόματα τη σελίδα στην προηγούμενη κατάσταση.

Ενημέρωση κατάστασης σελίδας

Η ενημέρωση του ιστορικού είναι μόνο μέρος του προβλήματος. πρέπει επίσης να είστε σε θέση να ενημερώσετε την κατάσταση της σελίδας ώστε να ταιριάζει με την κατάσταση στο ιστορικό.

Επειδή είστε ο υπεύθυνος της ιστορίας, εναπόκειται σε εσάς να διαχειριστείτε την κατάσταση της σελίδας. Για να ενημερώσετε τη σελίδα σας σε απόκριση της αλλαγής του location.hash, μπορείτε να ακούσετε το συμβάν hashchange: 

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';}

Η λειτουργία doclick () είναι τώρα υπεύθυνη μόνο για την ενημέρωση της μεταβλητής χρόνων και την αλλαγή του hash. Το συμβάν hashchange βρίσκεται στο αντικείμενο του παραθύρου. όταν πραγματοποιείται, ελέγχετε ότι υπάρχει ο κατακερματισμός. Σε μια πραγματική εφαρμογή, θα θέλατε επίσης να ελέγξετε ότι είχε έγκυρη τιμή. Στη συνέχεια, ορίζετε την τιμή των χρόνων ως τον αριθμό στο hash. Τέλος, ενημερώνετε το έγγραφο ώστε να αντικατοπτρίζει τη σωστή κατάσταση σελίδας. Ας δούμε αυτόν τον νέο κώδικα:

  1. Όπως και πριν, το hash στη διεύθυνση URL ενημερώνεται καθώς ο χρήστης κάνει κλικ.
  2. Αλλά τώρα, όταν πατηθεί το κουμπί Back, ενεργοποιείται η λειτουργία onhashchange και η κατάσταση σελίδας επαναφέρεται για να ταιριάζει με τη διεύθυνση URL.

Χρήση του location.hash

Η ιδιότητα location.hash και το συσχετισμένο συμβάν hashchange είναι χρήσιμες εάν θέλετε να επισημάνετε συγκεκριμένες προβολές της εφαρμογής σας και να επιτρέψετε στο χρήστη να πλοηγηθεί μεταξύ τους. Το Google Mail χρησιμοποιεί αυτή την προσέγγιση επιτρέποντάς σας να πλοηγηθείτε ανάμεσα στα εισερχόμενά σας (#inbox), στις επαφές (#contacts) και σε άλλες προβολές - αν έχετε λογαριασμό Gmail, δείτε τι συμβαίνει με τη διεύθυνση URL καθώς περιηγείστε σε διάφορες διαφορετικές σελίδες και και στη συνέχεια κάντε κλικ ξανά.

Όμως, όσον αφορά τις πληροφορίες κατάστασης, το hash μόνο σάς επιτρέπει να αποθηκεύσετε μια συμβολοσειρά. Θα μπορούσατε να κωδικοποιήσετε ένα πιο περίπλοκο αντικείμενο, αλλά η διεύθυνση URL γρήγορα θα γινόταν μακρά και δύσχρηστη και δεν θα ήταν αξέχαστη για τους χρήστες σας. Εάν χρειάζεστε πιο πολύπλοκες πληροφορίες που είναι αποθηκευμένες ως μέρος του ιστορικού, μια καλύτερη προσέγγιση θα ήταν να χρησιμοποιήσετε τον κατακερματισμό ως κλειδί για να τραβήξετε περαιτέρω κρατικές πληροφορίες από κάποιο κατάστημα. Παρόλο που θα μπορούσατε να ακολουθήσετε τη δική σας προσέγγιση σε αυτό, το HTML5 έδωσε ένα API για να το κάνει για σας μέσω της μεθόδου history.pushState () και του γεγονότος popstate. Αυτές οι μέθοδοι σας επιτρέπουν να αποθηκεύσετε και να φορτώσετε ξανά ένα σύνθετο αντικείμενο.

Περίληψη

Έχετε μάθει ότι η διαχείριση του ιστορικού του προγράμματος περιήγησης σας επιτρέπει να συμπεριφέρετε το κουμπί Επιστροφή με πιο συνετό τρόπο στο πλαίσιο της εφαρμογής σας, ενώ το API μικροδεδομένων σας δίνει πρόσβαση σε δομημένες σημασιολογικές πληροφορίες στα περιεχόμενα της σελίδας.

Ποιες χρήσεις σχεδιάζετε για αυτή την τεχνική; Έχετε αναπτύξει μια διαφορετική μέθοδο; Ενημερώστε μας στα σχόλια.

Προτεινόμενη εικόνα / μικρογραφία, επιστρέψτε την εικόνα μέσω Shutterstock.

εφαρμογές javascript πίσω κουμπί hello html5 & css ιστορία api κλέβουν πολλούς