Ένα σημαντικό πρόβλημα με εφαρμογές που βασίζονται στο JavaScript είναι ότι σπάζουν το κουμπί Back. Εάν ενημερώσετε περιεχόμενο στη σελίδα με JavaScript αντί να φορτώσετε μια νέα σελίδα από το διακομιστή, δεν υπάρχει καμία καταχώρηση στο ιστορικό του προγράμματος περιήγησης. οπότε όταν ο χρήστης κάνει κλικ στο κουμπί "Πίσω" και αναμένει να επιστρέψει στην προηγούμενη κατάσταση, καταλήγει στην προηγούμενη τοποθεσία.
Η μεταφορά και απόθεση είναι ένας πολύ καλός τρόπος για τους χρήστες να αλληλεπιδρούν με τις εφαρμογές ιστού σας. Όμως, τα κέρδη χρηστικότητας θα χαθούν εάν, μετά το πέρασμα του χρόνου που διανύει η εφαρμογή σας, οι χρήστες κάνουν κλικ στο κουμπί "Πίσω" αναμένοντας να επιστρέψουν μια σελίδα και να επιστρέψουν στην αρχική τους οθόνη. Σε αυτό το άρθρο "Γεια σας! HTML5 & CSS3 "ο συντάκτης Rob Crowther σάς δείχνει πώς να χρησιμοποιήσετε το API ιστορικού HTML5 για να αποφύγετε αυτή τη μοίρα.
Το πρόβλημα μπορεί να αποδειχθεί απλά. Το μόνο που χρειάζεστε είναι μια λειτουργία που ενημερώνει τη σελίδα ως απάντηση στη δραστηριότητα των χρηστών:
var times = 0;function doclick() {times++;document.getElementById('message').innerHTML ='Recorded ' + times + ' clicks';}και μια μικρή σήμανση:
Click MeRecorded 0 clicksΣτην πραγματική ζωή, η ιστοσελίδα σας θα κάνει κάτι πιο περίπλοκο, όπως η ανάκτηση νέου περιεχομένου από το διακομιστή μέσω του AJAX, αλλά μια απλή ενημέρωση αρκεί για να αποδείξει την ιδέα. Ας δούμε τι συμβαίνει όταν ο χρήστης επισκέπτεται τη σελίδα.
Η λειτουργία doclick () μπορεί να ενημερωθεί για να εκμεταλλευτεί το API ιστορικού. Κάθε φορά που ενημερώνεται η σελίδα, θα οριστεί επίσης το location.hash:
function doclick() {times++;location.hash = times;document.getElementById('message').innerHTML ='Recorded ' + times + ' clicks';}Η ενημέρωση του ιστορικού είναι μόνο μέρος του προβλήματος. πρέπει επίσης να είστε σε θέση να ενημερώσετε την κατάσταση της σελίδας ώστε να ταιριάζει με την κατάσταση στο ιστορικό.
Επειδή είστε ο υπεύθυνος της ιστορίας, εναπόκειται σε εσάς να διαχειριστείτε την κατάσταση της σελίδας. Για να ενημερώσετε τη σελίδα σας σε απόκριση της αλλαγής του 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. Τέλος, ενημερώνετε το έγγραφο ώστε να αντικατοπτρίζει τη σωστή κατάσταση σελίδας. Ας δούμε αυτόν τον νέο κώδικα:
Η ιδιότητα location.hash και το συσχετισμένο συμβάν hashchange είναι χρήσιμες εάν θέλετε να επισημάνετε συγκεκριμένες προβολές της εφαρμογής σας και να επιτρέψετε στο χρήστη να πλοηγηθεί μεταξύ τους. Το Google Mail χρησιμοποιεί αυτή την προσέγγιση επιτρέποντάς σας να πλοηγηθείτε ανάμεσα στα εισερχόμενά σας (#inbox), στις επαφές (#contacts) και σε άλλες προβολές - αν έχετε λογαριασμό Gmail, δείτε τι συμβαίνει με τη διεύθυνση URL καθώς περιηγείστε σε διάφορες διαφορετικές σελίδες και και στη συνέχεια κάντε κλικ ξανά.
Όμως, όσον αφορά τις πληροφορίες κατάστασης, το hash μόνο σάς επιτρέπει να αποθηκεύσετε μια συμβολοσειρά. Θα μπορούσατε να κωδικοποιήσετε ένα πιο περίπλοκο αντικείμενο, αλλά η διεύθυνση URL γρήγορα θα γινόταν μακρά και δύσχρηστη και δεν θα ήταν αξέχαστη για τους χρήστες σας. Εάν χρειάζεστε πιο πολύπλοκες πληροφορίες που είναι αποθηκευμένες ως μέρος του ιστορικού, μια καλύτερη προσέγγιση θα ήταν να χρησιμοποιήσετε τον κατακερματισμό ως κλειδί για να τραβήξετε περαιτέρω κρατικές πληροφορίες από κάποιο κατάστημα. Παρόλο που θα μπορούσατε να ακολουθήσετε τη δική σας προσέγγιση σε αυτό, το HTML5 έδωσε ένα API για να το κάνει για σας μέσω της μεθόδου history.pushState () και του γεγονότος popstate. Αυτές οι μέθοδοι σας επιτρέπουν να αποθηκεύσετε και να φορτώσετε ξανά ένα σύνθετο αντικείμενο.
Έχετε μάθει ότι η διαχείριση του ιστορικού του προγράμματος περιήγησης σας επιτρέπει να συμπεριφέρετε το κουμπί Επιστροφή με πιο συνετό τρόπο στο πλαίσιο της εφαρμογής σας, ενώ το API μικροδεδομένων σας δίνει πρόσβαση σε δομημένες σημασιολογικές πληροφορίες στα περιεχόμενα της σελίδας.
Ποιες χρήσεις σχεδιάζετε για αυτή την τεχνική; Έχετε αναπτύξει μια διαφορετική μέθοδο; Ενημερώστε μας στα σχόλια.
Προτεινόμενη εικόνα / μικρογραφία, επιστρέψτε την εικόνα μέσω Shutterstock.