HTML5: Oldalújratöltés nélküli tartalom és URL csere

Egyszerű és korszerű megoldás az oldal tartalmának ÉS a címsorban szereplő URL módosítására, mindezt a weboldal újratöltése nélkül

HTML5: Oldalújratöltés nélküli tartalom és URL csere

  • 2012-12-07
  • 2874 megtekintés
  • Szerző: Basa Bence

A napokban a Totel.hu weboldalon is élesítettük a legújabb fejlesztésünket, ami az oldal gördülékenységét biztosítja. Egy egyszerű, pár soros Javascript kóddal lehetőségünk lesz arra, hogy a weboldal tartalmát ÉS a címsorban látható URL-t anélkül cseréljük ki, hogy magát az oldalt újratöltenénk.

html5 url átírás oldalújratöltés nélkül

Ehhez a HTML5 egy újítását használtuk ki, amit már a legtöbb modern böngésző támogat (még az Internet Explorer 8 is!) - és segítségével hatásosan növelhető a felhasználói élmény (UX: User Experience). Arról nem is beszélve, hogy az egész kb 5 percnyi munkával installálható egy egyszerűbb weboldalba.

A KuponOS weboldal fejlesztésekor még nem volt elérhető ez a megoldás, így ott az akkori "trend" szerint használatos, úgynevett "hashtag"-es megoldást alkalmaztuk. A különbség annyi, hogy ott az URL utáni #-tet követte a dinamikus URL, ami pl akkor okozhatott kellemetlenséget, ha nem direktben a főoldalra hivatkoztak.

A HTML5-tel viszont (a most tárgyalt trükköt beleértve) lehetőségek tárháza nyílt meg (pl. a láblécben található, előre kitöltött - autofill - mezők), amit már a Facebook, Google is használ egy ideje.

Az általunk kifejlesztett megoldás előnye, hogy NINCS szükség komolyabb módosításokra a weboldal kódjában, mindössze egy Javascript fájlt kell betölteni: pageload.js. A fájban megjegyzések segítik az eligazodást. (Természetesen a kód szabadon másolható, blabla...)

Szerveroldalon mindössze annyi a feladat (ha nem sima HTML alapú oldalról van szó), hogy a teljes kimenet generálása és a fő tartalom generálása között lehessen különbséget tenni (esetünkben a ?ajax=true kapcsoló biztosítja, hogy a Javascript nem kapja meg az oldal keretét, csak a tartalmat).

A megoldás működéséhez szükség van a jQuery könyvtárra is, de ez is elég elterjedt mostanában.