Modificați adresa paginii fără să o reîncărcați sau apăsați pe html5 history

În ziua următoare, am experimentat descărcarea tuturor paginilor site-ului cu ajutorul tehnologiei AJAX și abilitatea de a accesa direct paginile folosind #hash. În general, deși aceasta și metoda de browser încrucișat, nu mi sa părut prea convenabilă, mai mult și mai greoaie. Și apoi mi-am amintit că în HTML5 poți controla istoria browserului. "Aici este - site-ul viselor mele!" M-am gândit.

O dată voi genera codul paginii cu un exemplu.

Există 3 link-uri pe pagină, fiecare dintre acestea având un eveniment onclick care apelează funcția followLink (eveniment, aceasta). Funcția are doi parametri, un eveniment și o referință la element.

Caracteristica principală a funcției este apelarea metodei pushState:

Când un utilizator navighează către o pagină nouă cu o actualizare completă, browser-ul își amintește noua adresă URL din istoricul browserului. Dacă utilizatorul face clic pe butonul Înapoi, browserul schimbă o pagină în istoric și îl returnează utilizatorului. Dar acum, atunci când o reîncărcare completă a paginii nu se întâmplă, atunci nu există nici o economie în istorie.

Rețineți, de asemenea, că dacă apăsați butonul "Actualizări pagină" sau dacă încercați să accesați direct această pagină, nu se va întâmpla nimic. Deci, în motorul site-ului ar trebui să existe un mecanism pentru încărcarea paginilor site-ului și cu o repornire completă.

API-urile pentru istoric sunt acceptate de următoarele browsere:
  1. Firefox 4.0+
  2. Safari 5.0+
  3. Chrome 8.0+
  4. Opera 11.10+
  5. IE 9.0