HTML5 – schimba URL-ul fara sa reincarci pagina

O caracteristica care a fost trecuta cu vederea din HTML 5 pana acum este evenimentul „onpopstate”. Acest nou feature ofera posibilitatea schimbarii URL-ului ce este afisat in browser cu ajutorul Javascript, fara a fi nevoiti sa reincarcam pagina. Va crea si un buton pentru reintoarcere si chiar va avea niste state-uri cu care poti interactiona.

Asta inseamna ca aplicatiile Ajax vor avea o imbunatatire importanta. Nu vom mai fi nevoiti sa folosim asa numitele „hash-hackuri” (#actiune) pentru a adauga o stare aplicatiei noastre ce se bazeaza pe Ajax iar motoarele de cautare vor fi capabile sa indexeze si pagina noastra.

Cum facem asta?

In Chrome e simplu :

window.history.pushState("obiect sau string", "Titlu", "/url-nou");

O data executata linia de mai sus va schimba URL-ul in nume-domeniu/url-nou (al treilea parametru). Al doilea parametru (titlul) este creat doar pentru a descrie noul state, neschimb titlul documentului asa cum credeam si eu. Documentatia W3C legata de el :
“Titles associated with session history entries need not have any relation with the current title of the Document. The title of a session history entry is intended to explain the state of the document at that point, so that the user can navigate the documents history.”
Primul parametru reprezinta un obiect sau un string care va reprezenta handlerul ce te va ajuta la manipularea paginii.

Ce putem face de aici?

Putem programa back() sau forward() sau, de ce nu, merge la un anume pas.

window.history.back();
window.history.forward();
window.history.go(2);

O abordare corecta atunci cand dorim sa cream un nou link este inlocuirea unuia deja existent cu altul, ca in exemplul de mai jos :

window.history.replaceState(“obiect sau string”, "Titlu", "/alt-url");

Astfel, utilizatorul nu va putea da back la pasul anterior pentru ca tu tocmai l-ai inlocuit.

Exemplu real

Daca ai cea mai noua versiune Chrome sau Safari poti vedea acest eveniment pus in aplicare de Flickr aici. Apasand undeva pe imagine, vei vedea ca linkul se schimba dar pagina nu se reincarca.

Concluzie

Acest eveniment este suportat deja de Chrome si Safari, si in viitorul apropiat de Mozilla Firefox o data cu Firefox 4. Din pacate Internet Explorer nu da semne ca acest feature va fi integrat in noua versiune noua a browserului. Sa speram ca vor reconsidera acest aspect. Intr-o alta ordine de idei, puteti citi mai multe despre evenimentul „onpopstate” pe W3C.