Modificați istoricul browserului în aplicații complexe

... apăsați butonul înapoi în browser.

Conținutul literei se va închide și o pagină cu o listă de litere se va deschide, în cazul în care utilizatorul a fost înainte de a deschide conținutul mesajului. Și dacă este o filă nouă de browser? Butonul de revenire nu va funcționa și nu poate fi apăsat. Există o problemă. În controlul nostru de e-mail nu este acceptat în niciunul dintre browsere, majoritatea utilizatorilor înțeleg acest lucru. Dar există soluții! Unele sunt legate de schimbarea rețelei (# name) în URL, astfel încât statul nu poate fi salvat. Acest lucru nu este ideal, dar funcționează în toate browserele.







Din fericire, problema a fost rezolvată folosind metodele HTML5 history.pushState și history.replaceState împreună cu evenimentele window.onpopstate.
Demo
Tehnica este surprinzător de simplă:

  1. Atunci când o stare se schimbă, de exemplu, atunci când un utilizator deschide un e-mail, history.pushState () transferă informații despre stare și execuție. Acest lucru permite butonul înapoi și, cel mai important, nu comută utilizatorul din pagină.
  2. Puteți rula history.pushState () ori de câte ori este necesar sau puteți modifica starea curentă cu history.replaceState ().
  3. Când utilizatorul dă clic înapoi (sau înainte), evenimentul window.onpopstate este declanșat. Funcțiile handlerului pot obține o stare asociată și pot afișa fila corespunzătoare.






Dezavantajul acestui lucru nu este compatibilitatea cu IE la versiunea 10. Dacă aveți nevoie de suport în IE9 și mai jos, există o serie de alte soluții, cum ar fi History.js și HTML5 History API.

Să scriem codul. Să presupunem că rezultatul cererii Ajax este afișat:

history.replaceState () are aceleași argumente și este folosit dacă doriți să înlocuiți starea curentă cu una nouă.

Funcționer de funcții care este lansat după ce faceți clic pe butonul "înapoi" sau pe butonul "în continuare" din browser:

Locația URL poate fi specificată cu document.location (parametrii document.location.search and document.location.hash retur și numele hash în consecință).

Starea obiectului PushState () sau replaceState () este obținută din obiectele evenimentului de stare proprietate. Puteți utiliza aceste informații pentru a afișa ecranul corespunzător.

Faceți clic pe butonul history.pushState de mai multe ori, apoi reveniți pentru a vedea ce se întâmplă în jurnal.

Postări interesante







Articole similare

Pagina anterioară

Pagina următoare

Trimiteți-le prietenilor: