HTML5 – schimba URL-ul fara sa reincarci pagina
6O 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.
Nu-ti face griji in ceea ce priveste concluzia. Pentru necunoscatori, Internet Explorer este cel mai folosit. Pentru cei ce ii intereseaza astfel de lucruri, Google Chrome, Safari si Mozilla Firefox sunt cele folosite.
Problema e ca aplicatiile in general le faci sa simplifici taskuri, asta inseamna ca ajuti necunoscatorii sa faca treburi care nu le inteleg.
Pana nu se finalizeaza standard-ul si nu se implementeaza in Safari, Chrome, Opera si FF nu o sa le folosesc. Mai bine o fac cu AJAX. IE-ul… trebuie sa renunte jucatorii mari la support pentru el. Dupa aceea va scadea si market share-ul suficient incat sa nu te mai chinui cu optimizarea.
Nu ai inteles prea bine.
Safari si Chrome implementeaza deja tot ce va fi in standard, Firefox vine din urma. Hmm, cum faci tu treaba cu Ajax only?
Ideea e urmatoarea : tu ramai la ajax doar ca continutul ajax nu poate fi indexat pentru ca evident, e din ajax. Astfel, cu ajutorul evenimentului problema se rezolva, si poti indexa si contentul ala. 🙂
Asa e, imi pare rau, am citit superficial.
Chiar ma intrebam cum face treaba asta facebook-ul 🙂
Thanks for the article!