esmaspäev, 2. november 2009

onhashchange event

Üheks HTML5 standardi järgi lisanduvaks window objekti sündmuseks on onhashchange ehk siis sündmus, mis annab JavaScriptile teada, kui URL-is on muutunud URL'i lõpus asuv #hash.

Milleks see kasulik on?

Sisuliselt saab antud sündmusega lahendada Ajax põhisel navigeerimisel (lehte ennast navigeerimisel ei laeta, muudetakse vaid osa lehe sisust serverist laetud andmetega) edasi-tagasi liikumise ning ka järjehoidjate probleemi.

Probleem

Nimelt kui kasutaja enda teada liigub lehel ringi ja ühel hetkel tahab tagasi liikuda lehe eelmise oleku juurde ning vajutab selle saavutamiseks brauseri back nuppu, siis selle asemel et saavutada lehe eelmine olek, navigeeritakse lehelt üldse minema. Kuna tegelikkuses vahepeal ühtegi lehe laadimist ei ole toimunud, siis brauseri jaoks tähendab tagasiminek tagasiminekut eelmise veebilehe juurde.

#hash lingid aga on mõeldud just lehesiseseks navigeerimiseks (lehe laadimist ei toimu) ning brauser salvestab need muutused ka kenasti brauseri ajaloos, kust võetakse info edasi-tagasi liikumise kohta. Siiani aga on probleemiks olnud, et skript ei saa mitte kuidagi teada, kui kasutaja mingil viisil #hash linki muudab.

Loomulikult saab erinevatel kaudsetel viisidel seda asja lahendada. Näiteks kui kasutaja klikib lingil #teemidagi, siis on lingile lisatud ka vastav onclick sündmus, mis selle "teemidagi" operatsiooni ära teeks. URL muutub ja operatsioon tehakse ära.

Probleem aga tekib ikkagi, kui kasutaja nüüd back nuppu vajutab. Seekord ju onclick sündmus ei rakendu ja skript ei tea rakenduda. Sama lugu on järjehoidjatega. Kui kasutaja lisab #teemidagi URL enda järjehoidjatesse ja avab selle sealt, ei tea skript samuti rakendumisest midagi.

Lahendus

Lahendus peitubki onhashchange sündmuses. Sellisel viisil ei pea lingile defineerima täiendavat onclick sündmust, mis muudab ära nii hash'i kui teeb ka nõutud operatsiooni, vaid ühe universaalse onhashchange sündmuse.

Kui kasutaja klikib lingile #teemidagi, siis brauser muudab URL-i ära ning seejärel annab onhashchange sündmuse kuulajale teada, et hash on muutunud. Kuulaja kontrollib, et mis on hetkel hashi väärtus (location.hash) ja teeb sellele vastava tegevuse.

Kui kasutaja klikib edasi-tagasi nuppe või avab lingi järjehoidja kaudu, siis rakendub täpselt sama skeem. Brauser annab kogu aeg vastavale kuulajale teada hashi muutumisest ning skript teab alati käituda vastavalt vajadusele.

Kus töötab?

onhashchange sündmuse tugi on olemas brauserites Firefox 3.6 beta, Internet Explorer 8, Chrome 4, Webkit nightly. Eeldades, et brauserid uuenevad praeguses tempos peaks umbes poole aasta pärast antud sündmuse haldust toetama enamus brauseritest.

Kommentaare ei ole: