• Acasă
  • Despre noi
  • Autori
  • Mărturii
  • Arhivă
  • Trimite Articol
  • Contact

WORLDIT

Lumea în 1 și 0.

  • Știri
    • Tehnologie
    • Tehnologie mobilă
    • Securitate
    • Developers
    • Știință
    • Benzi desenate
    • Jocuri
    • Intern
  • Tehnic
    • Browser
    • C#
    • C/C++
    • Challenge
    • HTML/CSS
    • Javascript, Ajax, jQuery
    • Open Source
    • PHP
    • Python
    • Securitate IT
    • Socializare
    • WordPress
    • Altele
  • Recenzii
  • Interviuri
  • Evenimente

HTML5 – schimba URL-ul fara sa reincarci pagina

6
  • Publicat de Andrei Avădănei
  • în HTML/CSS · Tehnic
  • — 20 aug., 2010 at 1:53 pm

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.

Etichete: ce poate html5Chromedespre html5html5Safaritutorial html5

— Andrei Avădănei a scris 1246 articole

Andrei scrie pe worldit.info din vara lui 2011. Este fondatorul Asociatiei Centrul de Cercetare in Securitate Informatica din Romania - CCSIR si coordoneaza DefCamp, cea mai importanta conferinta de securitate informatica & hacking din Europa Centrala si de Est. Andrei ofera in cadrul Bit Sentinel servicii de securitate informatica, penetration testing, security management, recuperarea de pe urma unui atac cibernetic, training-uri si workshop-uri.

  • Articolul anterior Google vrea sa lanseze Chrome Web Store
  • Articolul următor eGazduireWeb Startup incurajeaza ideile bune

6 Comentarii

  1. Zoly spune:
    august 20, 2010 la 2:10 pm

    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.

  2. Andrei Avadanei spune:
    august 20, 2010 la 2:22 pm

    Problema e ca aplicatiile in general le faci sa simplifici taskuri, asta inseamna ca ajuti necunoscatorii sa faca treburi care nu le inteleg.

  3. Creeps spune:
    august 20, 2010 la 3:43 pm

    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.

  4. Andrei Avadanei spune:
    august 20, 2010 la 3:45 pm

    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. 🙂

  5. Creeps spune:
    august 20, 2010 la 3:54 pm

    Asa e, imi pare rau, am citit superficial.

  6. Prisacaru Anatolie spune:
    martie 5, 2011 la 4:40 am

    Chiar ma intrebam cum face treaba asta facebook-ul 🙂
    Thanks for the article!


  • Facebook

    WorldIT.info
  • Ultimele Atacuri Cibernetice din Romania – RO Hacked

    [wp_rss_retriever url="https://rohacked.bit-sentinel.com/feed/" excerpt="none" items="5" read_more="false" new_window="true" thumbnail="false" cache="0"] RO Hacked este registrul atacurilor cibernetice din România.
  • Caută

  • Articole Recomandate

    • Recent Posts
    • Tags
    • Număr record de participanți la DefCamp 2015, cel mai important eveniment dedicat securității cibernetice din Europe Centrala si de Estdecembrie 2, 2015
    • La DefCamp 2015 vei afla prin ce tehnici pot fi evitate măsurile de securitate ale sistemelor informatice criticeoctombrie 16, 2015
    • Ultima sansa sa rezervi bilete de tip Early Bird la DefCamp 2015septembrie 1, 2015
    • 15 sfaturi despre cum poti deveni un programator bun venite de la specialisti romaniaugust 4, 2015
    • algoritmica Android antivirus Apple Avadanei Andrei benzi desenate BitDefender blog browser C++ Chrome concurs eveniment Facebook Firefox Google google chrome hacking html5 infografic informatica internet Internet Explorer IT javascript linux Microsoft Mozilla Firefox online PHP programare retea sociala review Romania securitate Tehnologie Twitter web Windows Windows 7 Wordpress WorldIT worldit.info Yahoo! YouTube
  • februarie 2021
    L Ma Mi J V S D
    1234567
    891011121314
    15161718192021
    22232425262728
    « dec.    
  • Link-uri Sponsorizate

    • laptop second hand

    • Calculatoare Second Hand

    • cod voucher pc garage

  • Home
  • Tehnic
  • HTML/CSS
  • HTML5 – schimba URL-ul fara sa reincarci pagina
  • Important

    • Bit Sentinel
    • Centrul de Cercetare în Securitate Informatică din România
    • DefCamp
  • Prieteni

    • BetiT.ro
    • bijuterii handmade
    • Computerica | Resurse gratuite PC
    • Descopera.org
    • Gadgeturi si IT – Giz.ro
  • Prieteni

    • PC – Config
    • RO Hacked
    • Stiri IT

Copyright © 2009-2014 WORLDIT. Toate drepturile Rezervate.
Termeni și condiții | Contact | Licența Creative Commons