Αυτό το άρθρο θα περιγράψει τις μεθόδους τροποποίησης της διεύθυνσης URL χωρίς επαναφόρτωση της ιστοσελίδας χρησιμοποιώντας JavaScript.
Πώς να τροποποιήσετε/αλλάξετε τη διεύθυνση URL στο JavaScript χωρίς να φορτώσετε ξανά τη σελίδα;
Για να τροποποιήσετε τη διεύθυνση URL χωρίς να φορτώσετε ξανά την ιστοσελίδα, χρησιμοποιήστε την ακόλουθη προκαθορισμένη μέθοδο JavaScript:
Μέθοδος 1: Τροποποίηση της διεύθυνσης URL σε JavaScript χωρίς επαναφόρτωση της σελίδας χρησιμοποιώντας τη μέθοδο 'pushState()'
Για να τροποποιήσετε τη διεύθυνση URL χωρίς να φορτώσετε ξανά την ιστοσελίδα, χρησιμοποιήστε το ' pushState() 'μέθοδος. Είναι ένα χαρακτηριστικό ή η προκαθορισμένη μέθοδος του ' ιστορία Αντικείμενο ' που επιτρέπει την αλλαγή του ιστορικού του προγράμματος περιήγησης χωρίς πλοήγηση ή ανανέωση της σελίδας. Απλώς προσθέτει ή τροποποιεί τη στοίβα ιστορικού και δεν φορτώνει νέα σελίδα. Χρησιμοποιώντας αυτήν την προσέγγιση, μπορείτε να κάνετε εναλλαγή μεταξύ των σελίδων προσθέτοντας μια νέα καταχώρηση στη στοίβα ιστορικού του προγράμματος περιήγησης.
Σύνταξη
Ακολουθήστε τη δεδομένη σύνταξη για τη μέθοδο 'pushState()':
παράθυρο. ιστορία . pushState ( κατάσταση , τίτλος , url ) ;
Εδώ:
- ' κατάσταση ” αντιπροσωπεύει τη νέα καταχώρηση ιστορίας.
- ' τίτλος ” είναι το συγκεκριμένο κείμενο που μπορεί να εμφανιστεί στη γραμμή τίτλου του προγράμματος περιήγησης.
- ' url ' υποδεικνύει τη διεύθυνση URL που αντικαταστάθηκε ως νέα καταχώρηση.
Παράδειγμα
Σε ένα αρχείο HTML, δημιουργήστε τέσσερα κουμπιά που καλούν το ' modifyUrl() Λειτουργία στο κουμπί κλικ:
< κουμπί κάνοντας κλικ = 'modifyUrl('CSS Tutorial', 'CSSTutorial.html');' > 2 κουμπί >
< κουμπί κάνοντας κλικ = 'modifyUrl('Εκμάθηση JavaScript', 'JavaScriptTutorial.html');' > 3 κουμπί >
< κουμπί κάνοντας κλικ = 'modifyUrl('Εκμάθηση Java', 'JavaTutorial.html');' > 4 κουμπί >
Ορίστε μια συνάρτηση ' modifyUrl() ” σε ένα αρχείο JavaScript που θα ενεργοποιήσει το κλικ στο κουμπί. Χρειάζονται δύο παραμέτρους, το ' τίτλος ' και το ' url '. Όταν η μέθοδος καλείται στο κλικ στο κουμπί, ο 'τίτλος' και το 'url' θα περάσουν ως ορίσματα. Ελέγξτε τον τύπο του ' pushState 'του αντικειμένου ιστορίας, αν δεν είναι ' απροσδιόριστος '. Στη συνέχεια, καλέστε το ' history.pushState() ' μέθοδος αλλαγής της διεύθυνσης URL:
λειτουργία modifyUrl ( τίτλος , url ) {
αν ( του είδους ( ιστορία. pushState ) != 'απροσδιόριστος' ) {
ήταν αντικ = {
Τίτλος : τίτλος ,
Url : url
} ;
ιστορία. pushState ( αντικ , αντικ. Τίτλος , αντικ. Url ) ;
}
}
Μπορεί να φανεί ότι σε κάθε κλικ κουμπιού, η διεύθυνση URL θα αλλάξει επιτυχώς χωρίς να φορτωθεί ξανά η σελίδα:
Στην παραπάνω έξοδο, μπορείτε να δείτε ότι το κουμπί πίσω βέλους επάνω αριστερά ( <- ) ενεργοποιείται ενώ κάνετε κλικ στο κουμπί, υποδηλώνει ότι μπορείτε να πλοηγηθείτε εμπρός και πίσω επειδή το « pushState() Η μέθοδος ' προσθέτει τη νέα διεύθυνση URL στη στοίβα του ιστορικού.
Μέθοδος 2: Τροποποίηση της διεύθυνσης URL σε JavaScript χωρίς επαναφόρτωση της σελίδας χρησιμοποιώντας τη μέθοδο 'replaceState()'
Χρησιμοποιήστε το ' replaceState() ' μέθοδος για την τροποποίηση της διεύθυνσης URL χωρίς επαναφόρτωση της ιστοσελίδας. Είναι επίσης χαρακτηριστικό του « ιστορία Αντικείμενο αλλά δεν θα προσθέσει νέα καταχώρηση στη στοίβα του ιστορικού. Αλλάζει την υπάρχουσα κατάσταση του ιστορικού του προγράμματος περιήγησης και την αντικαθιστά με μια νέα κατάσταση. Χρησιμοποιώντας αυτήν την προσέγγιση, δεν μπορείτε να κάνετε εναλλαγή μεταξύ των σελίδων.
Σύνταξη
Η δεδομένη σύνταξη χρησιμοποιείται για τη μέθοδο 'replaceState()':
Παράδειγμα
Στην καθορισμένη συνάρτηση, καλέστε το ' replaceState() ” μέθοδος αντικατάστασης της διεύθυνσης URL στο κουμπί κλικ χωρίς επαναφόρτωση ή πλοήγηση στη σελίδα:
αν ( του είδους ( ιστορία. αντικαταστήστε το κράτος ) != 'απροσδιόριστος' ) {
ήταν αντικ = {
Τίτλος : τίτλος ,
Url : url
} ;
ιστορία. αντικαταστήστε το κράτος ( αντικ , αντικ. Τίτλος , αντικ. Url ) ;
}
}
Η έξοδος υποδεικνύει ότι με το πάτημα κάθε κουμπιού, η διεύθυνση URL έχει αλλάξει και δεν υπάρχει επιλογή πλοήγησης για επιστροφή, καθώς το κουμπί πίσω βέλους είναι απενεργοποιημένο:
Παρέχουμε όλες τις βασικές πληροφορίες που σχετίζονται με την τροποποίηση της διεύθυνσης URL χωρίς επαναφόρτωση της σελίδας σε JavaScript.
συμπέρασμα
Για να τροποποιήσετε/αλλάξετε τη διεύθυνση URL χωρίς ανανέωση της ιστοσελίδας, χρησιμοποιήστε το ' pushState() 'μέθοδος ή η ' replaceState() μέθοδος. Η μέθοδος 'pushState()' προσθέτει τη νέα διεύθυνση URL ως νέα καταχώρηση σε μια στοίβα ιστορικού και επιτρέπει στους χρήστες να πλοηγούνται εμπρός και πίσω. Ενώ η μέθοδος 'replaceState()' αντικαθιστά τη διεύθυνση URL και δεν επιτρέπει τη μετακίνηση στην πίσω σελίδα. Αυτό το άρθρο περιγράφει τις μεθόδους για την τροποποίηση της διεύθυνσης URL χωρίς επαναφόρτωση της ιστοσελίδας χρησιμοποιώντας JavaScript.