o introducere simplă a API-ului istoric în JavaScript

API-ul istoric este una dintre acele tehnici JavaScript pe care fiecare dezvoltator web trebuie să le cunoască la rece. Fără ea, un singur clic pe butonul din spate va sari direct din cererea dumneavoastră. Veți pierde orice lucrare în curs, iar utilizatorul va fi forțat să înceapă peste tot din nou.

Din fericire, există o soluție ușoară. Încă de la formalizarea HTML5 (și lansarea Internet Explorer 10), am avut un API istoric care vă permite să adăugați la lista istoric și să reacționați la navigarea înapoi și înainte. În acest articol, veți afla cum funcționează — și îl veți încerca cu un exemplu live.

dar înainte de a merge mai departe, să aruncăm o privire mai atentă asupra problemei.

în vremurile vechi ale web—ului, o pagină web făcea un singur lucru-afișa lucruri. Când ai vrut să te uiți la altceva, ai făcut clic pe un link și ai mers la o nouă adresă URL.

pe măsură ce JavaScript a devenit mai puternic, dezvoltatorii și-au dat seama că fiecare pagină web ar putea fi o aplicație completă în sine. O pagină web ar putea rivaliza cu o aplicație desktop! Problema a fost că butoanele Înapoi și înainte din browser nu se potriveau acestui nou model de aplicație. De exemplu, un utilizator poate efectua o secvență de sarcini într-o aplicație web cu o singură pagină și apoi se așteaptă să utilizeze butonul Înapoi pentru a reveni la un singur pas. În schimb, butonul Înapoi va reveni la pagina web anterioară, închizând efectiv aplicația JavaScript în mijlocul a ceea ce făcea.

de multe ori, acest comportament nu a fost intuitiv. De exemplu, luați în considerare o aplicație care utilizează obiectul XMLHttpRequest pentru a prelua date noi și a actualiza pagina. Pentru utilizator, s-ar putea să pară că călătorește către o pagină nouă. Dar dacă fac greșeala de a folosi butonul din spate, iluzia este spulberată și totul merge lateral.

să aruncăm o privire mai atentă. Iată un exemplu care vă permite să treceți prin Dictionnaire Infernal, o carte faimoasă (și acum domeniu public) din 1818 care descrie fiare ciudate din superstiție și mitologie. Trucul este că linkurile anterioare și următoare nu vă duc la o altă pagină. În schimb, declanșează un apel asincron prin XMLHttpRequest care primește informațiile pentru următorul diapozitiv. Apoi, codul JavaScript actualizează caseta de diapozitive, fără a deranja conținutul din restul paginii.

Iată o versiune live a exemplului, completată cu suport API istoric. Chiar dacă totul are loc într-o singură pagină web, puteți utiliza butoanele Înainte și înapoi pentru a trece perfect de la o imagine la alta. Puteți utiliza chiar și butonul de reîncărcare (reîncarcă diapozitivul curent, mai degrabă decât să reporniți întreaga aplicație) și puteți plasa marcaje care păstrează starea curentă — cu alte cuvinte, vă conduc direct înapoi la diapozitivul la care vă uitați în prezent.

și iată o versiune veche a exemplului care nu folosește API-ul istoric. Nu contează cât de departe sunteți în spectacolul lateral — când utilizați butonul înapoi, reveniți la pagina web anterioară. Butoanele Forward și Reload sunt rupte în mod similar. Marcaje reporniți aplicația de la început.

puteți descărca tot codul sursă aici pentru a juca cu. (Cu toate acestea, nu va funcționa local, deoarece utilizează obiectul XMLHttpRequest pentru a face solicitări web.) În restul acestui articol, voi descompune cum funcționează totul.

pregătirea exemplului

înainte de a intra în API-ul istoric, este important să avem o înțelegere de bază a modului în care funcționează acest exemplu. Totul este destul de simplu.

pagina folosește un număr pentru a urmări diapozitivul pe care îl afișează în prezent. Când faceți clic pe Următorul sau anterior, codul modifică numărul curent al diapozitivului. Apoi folosește propria funcție goToSlide() pentru a actualiza pagina.

goToSlide() funcția este locul în care are loc lucrarea reală. Începe o cerere asychronous folosind infamul XMLHttpRequest obiect.

depinde de dvs. să decideți cum este generat conținutul diapozitivului și trimis înapoi la codul de apelare din pagină. De obicei, veți avea un fel de cadru de rutare care declanșează codul din partea serverului potrivit. Acest cod server-side poate apuca apoi conținutul diapozitiv dintr-un cache, o bază de date, un fișier, sau chiar un bloc greu codificate de marcare.

în acest exemplu, am păstrat lucrurile cât mai simple posibil. Cererea apucă marcajul HTML dintr-un fișier static. Deci, dacă solicitați al treilea diapozitiv (cu o adresă URL relativă, cum ar fi diapozitivele/3), veți obține un fragment de marcaj HTML doar pentru acel diapozitiv. Ușurel!

când cererea se termină, browserul declanșeazănewSlideReceived() handler de evenimente. Apoi, este pur și simplu o chestiune de a lua marcajul primit și de a-l introduce în pagină, folosind un substituent <div>.

asta e tot ce trebuie să știți pentru a construi versiunea naivă a acestei pagini, care nu acceptă istoricul browserului.

obiectul istoric

history obiectul a existat aproape de la începutul JavaScript. Dar pentru o mare parte din viața sa, a fost mult mai puțin puternic (și mult mai puțin util) decât este astăzi.

obiectul originalhistory are o singură proprietate și trei metode de bază. Proprietatea este length și vă spune câte intrări sunt în lista istoricului browserului:

alert("You have " + history.length + " pages in the history.");

acest detaliu este în mare parte inutil.

cele trei metode originale history Sunt back() (trimite un vizitator cu un pas înapoi în istoricul de navigare), forward() (trimite un vizitator cu un pas înainte) și go() offset numeric care spune browser-ul cât de mulți pași pentru a merge înainte sau înapoi). Toate acestea se adaugă la relativ puțin, cu excepția cazului în care doriți să vă proiectați propriile butoane personalizate înapoi și înainte pe o pagină web.

HistoryAPI adaugă două ingrediente mult mai utile:pushState() metoda șionPopState eveniment.

adăugarea unei intrări în lista de istoric

metodapushState() este elementul central al API-ului istoric. Acesta vă permite să adăugați un element nou în lista de istorie pentru pagina curentă. Iată cum arată asta:

în acest moment, s — ar putea să vă întrebați-Ce rost are să aveți mai multe intrări pentru aceeași pagină? Trucul este că fiecare intrare are o anumită stare atașată cu ea — o informație legată sau un obiect pe care l-ați setat. Când utilizatorul face pași înapoi prin lista de istoric, obțineți informațiile de stare corespunzătoare, astfel încât să puteți returna pagina la versiunea anterioară.

metodapushState() are trei argumente:

• date. Primul argument este orice bucată de date pe care doriți să stocați pentru a reprezenta starea curentă a acestei pagini. Veți utiliza aceste informații pentru a restaura pagina atunci când utilizatorul se întoarce prin lista de istoric.
• Titlu. Al doilea argument este titlul paginii pe care doriți să îl afișeze browserul. În prezent, toate browserele sunt unificate în ignorarea acestui detaliu. (Deci, puteți trece doar null.)
• URL. Al treilea argument este noua versiune a adresei URL pe care doriți să o afișați pentru pagină în bara de adrese a browserului. Acest lucru vă permite să adăugați un suport mai bun pentru butonul de reîncărcare și marcajele browserului.

în Dictionnaire Infernal slideshow exemplu, este ușor să adăugați suport istorie tot ce ai nevoie pentru a urmări este numărul de diapozitive. Adăugați la lista istoric de fiecare dată când diapozitivul se schimbă.

iată linia de cod pe care trebuie să o adăugați:

history.pushState(slideNumber, null, null);

veți observa că acest cod nu schimbă titlul paginii cu al doilea argument (pentru că oricum nu funcționează) și nu schimbă adresa URL (veți vedea cum se face asta într-o clipă). Tot ce face este să stocheze numărul diapozitivului.

pentru imaginea completă, aici sunt cele două apeluri la history.pushState() în locul lor-Stivuitoare eveniment pentru link-urile următoare și anterioare:

revenind la o pagină anterioară

când utilizați metodapushState(), trebuie să vă gândiți și la omologul său natural,onPopState. În timp cepushState() metoda pune o nouă intrare în lista de istorie a browserului,onPopState eveniment vă oferă șansa de a face cu ea atunci când utilizatorul se întoarce.

pentru a înțelege cum funcționează acest lucru, luați în considerare ce se întâmplă dacă un vizitator parcurge toate diapozitivele din exemplul Infernal Dictionnaire. Pe măsură ce fiecare diapozitiv nou este încărcat, pagina adaugă o intrare istoric. Dar dacă utilizatorul face pași înapoi cu butonul înapoi, nu se întâmplă nimic.

pentru a remedia acest neajuns, trebuie să se ocupe deonPopState eveniment, care este declanșat după fiecare navigare istorie. (Aceasta include dacă utilizați una dintre metodele de istorie, cum ar fi history.back(), precum și atunci când utilizatorul face clic pe butoanele de navigare ale browserului.)

onPopState evenimentul furnizează codul dvs. cu informațiile de stare pe care le-ați stocat anterior cupushState(). În acest caz, acesta este doar numărul diapozitivului, pe care îl puteți prelua din state proprietatea argumentului evenimentului, așa:

var slideNumber = e.State;

sarcina dvs. este să utilizați informațiile de stare pentru a restabili versiunea corectă a paginii. În exemplul curent, asta înseamnă încărcarea diapozitivului corespunzător apelând la îndemână goToSlide() funcție care gestionează toată navigarea cu diapozitive. Codul complet este scurt și simplu:

observați că trebuie să verificați dacăe.State estenull, ceea ce se întâmplă în unele browsere atunci când pagina este încărcată pentru prima dată și nu există nicio stare salvată.

schimbarea URL-ului

Versiunea curentă a acestui exemplu acceptă lista de istoric, dar nu se joacă frumos cu butonul de reîncărcare. De exemplu, dacă faceți clic pe al treilea diapozitiv și apoi reîmprospătați pagina, veți reveni la început. Vă veți găsi în aceeași situație dacă încercați să marcați unul dintre diapozitive — reveniți la marcaj și veți începe din nou pe primul diapozitiv.

soluția la aceste probleme este utilizarea API-ului istoric pentru a modifica adresa URL. Dar există un motiv important pentru care am lăsat acest pas până la sfârșit. Adesea, exemplele care utilizează API-ul istoric modifică adresa URL, dar nu utilizează noua adresă URL. Acest lucru poate duce la o aplicație web care se rupe atunci când utilizatorul o reîmprospătează (cu o eroare urâtă 404) sau merge la o versiune similară, dar ușor diferită a paginii. Dacă nu sunteți sigur cum să gestionați diferite adrese URL, nu este nicio rușine să utilizați abordarea simplificată din exemplul anterior.

deci, să presupunem că sunteți gata să se scufunde în, Face URL-uri mai bune, și să se joace frumos cu marcaje și browser-ul reîmprospătează. Există două abordări de bază pe care le puteți lua:

• schimbați numele paginii URL cu totul. În exemplul Dictionnaire Infernal, puteți schimba adresa URL în Slide1.html, Glisant2.html, și așa mai departe ca utilizatorul se deplasează prin slide-uri. Captura este că trebuie fie să aveți pagini reale cu aceste nume (nu faceți asta, este greoaie), fie trebuie să configurați rutarea astfel încât atunci când serverul dvs. web primește o solicitare pentru Slide2.html rulează cod care creează versiunea corectă a paginii.
• păstrați același nume de pagină, dar adăugați informații la șirul de interogare. Aceasta este o abordare mai simplă, la scară mai mică. Pe măsură ce utilizatorul călătorește prin prezentarea de diapozitive, veți ajunge la adrese URL precum prezentarea de diapozitive.html?slide = 1, apoi SlideShow.html?slide = 2, SlideShow.html?slide = 3, și așa mai departe. Beneficiul acestei abordări este că este ușor să scrieți o mică bucată de JavaScript care verifică șirul de interogare și vă asigură că sunteți pe diapozitivul drept atunci când pagina este reîncărcată. Nu aveți nevoie de niciun cod de server pentru a face acest lucru — o pagină poate face totul.

Iată o versiune modificată apushState() apel ați văzut mai devreme, care utilizează a doua abordare. Acest cod introduce numărul diapozitivului la sfârșitul adresei URL:

history.pushState(slide, null, "Dictionnaire.html?slide=" + slide);

și iată codul care rulează atunci când pagina este reîncărcată. Verifică informațiile diapozitivului din URL și — dacă găsește un număr adecvat-apelează funcția goToSlide() pentru a încărca diapozitivul.

acum nu vei pierde locul în prezentarea. Puteți încerca versiunea completă a acestui exemplu sau puteți descărca totul aici.

detalii finale

API-ul istoric este ușor de utilizat, dar facilitează și crearea unor probleme mai mari pe care le rezolvați. Acum, că știți cum se potrivește totul, iată câteva sfaturi finale:

• dacă împingeți, trebuie să pop. pushState() metoda șionPopState eveniment sunt parteneri. Ce pui cu unul, te întorci cu celălalt.
• nu schimbați adresa URL decât dacă sunteți gata să o gestionați. Este plăcut să vă schimbați adresa URL pentru a reflecta pagina în schimbare, dar trebuie să puteți gestiona solicitările pentru fiecare adresă URL pe care o utilizați. Dacă adresa URL indică o pagină care nu există, aplicația dvs. va întrerupe reîmprospătările și marcajele.
• utilizați un obiect de stare personalizat pentru a stoca mai multe informații. Nu trebuie să rămâi cu un număr simplu. Puteți pune un întreg obiect personalizat în stare, care poate îmbina toate informațiile de care aveți nevoie pentru o sarcină complexă.