Kóði

Hvernig á að stjórna afturhnappinum með JavaScript

Eitt stórt mál með forritum sem byggjast á JavaScript er að þeir brjóta bakhnappinn. Ef þú uppfærir efni á síðunni með JavaScript frekar en að hlaða inn nýjum síðu frá þjóninum, er engin færsla gerð í vafraferlinum; svo þegar notandinn smellir á Til baka, búist við að fara aftur í fyrra ríki, þá lýkur þeir á fyrri staðinn í staðinn.

Dragðu og slepptu er frábær leið fyrir notendur að hafa samskipti við vefforritin þín. En nothæfi hagnaðurin mun týnast ef notendur smella á bakhnappinn eftir að hafa eytt tíma í gegnum umsóknina og búast við að fara aftur á síðu og fara aftur í byrjunarskjáinn. Í þessari grein "Halló! HTML5 og CSS3 "höfundur Rob Crowther sýnir þér hvernig á að nota HTML5 sögu API til að forðast að örlög.

Vandamálið er hægt að sýna einfaldlega. Allt sem þú þarft er aðgerð sem uppfærir síðuna sem svar við notendavirkni: 

var times = 0;function doclick() {times++;document.getElementById('message').innerHTML ='Recorded ' + times + ' clicks';}

og smá merking: 

Click Me
Recorded 0 clicks

Í raunveruleikanum myndi vefsíðan þín gera eitthvað flóknara, eins og að sækja nýtt efni frá þjóninum í gegnum AJAX, en einföld uppfærsla er nóg til að sýna fram á hugmyndina. Við skulum sjá hvað gerist þegar notandinn heimsækir síðuna.

  1. Notandinn byrjar á heimasíðu sinni og ákveður að heimsækja ótrúlega Click Me forritið sem þeir hafa heyrt um.
  2. Þeir slá inn slóðina eða fylgja tengil frá tölvupósti til að komast á Click Me síðuna.
  3. Eftir nokkrar sekúndur af skemmtilegum samskiptum hefur blaðsíðan breyst nokkrum sinnum.
  4. En þegar notandinn smellir á bakhnappinn í vafranum finnur hann að í stað þess að fara aftur á fyrri síðu ástandi hleypur þeir heim til sín.

The doclick () virka er hægt að uppfæra til að nýta sögu API. Í hvert skipti sem blaðið er uppfært mun það einnig setja staðsetningu.hash: 

function doclick() {times++;location.hash = times;document.getElementById('message').innerHTML ='Recorded ' + times + ' clicks';}
  1. Notandinn kemur á Click Me síðunni eins og áður.
  2. Takið eftir að vefslóðin er uppfærð eftir hverja smelli - "#" hefur birst í lok þess.
  3. Með því að smella á hnappinn Til baka er nú staðsetningin aftur í # 2, sem sýnir að blaðsíður hafa verið bætt við sögu. En athugaðu að því að smella á bakka takkann skilar ekki sjálfkrafa síðunni í fyrri stöðu þess.

Uppfærsla blaðsíðu

Uppfærsla sögunnar er aðeins hluti af vandamálinu; þú þarft einnig að vera fær um að uppfæra stöðu síðunnar til að passa við ástandið í sögunni.

Vegna þess að þú ert sá sem stjórnar sögunni, þá er það undir þér komið að stjórna síðunni. Til að uppfæra síðuna þína til að bregðast við að staðsetning.hash sé breytt geturðu hlustað á hashchange atburðinn: 

function doclick() {times++;location.hash = times;}window.onhashchange = function() {if (location.hash.length > 0) {times = parseInt(location.hash.replace('#',''),10);} else {times = 0;}document.getElementById('message').innerHTML ='Recorded ' + times + ' clicks';}

The doclick () virka er nú aðeins ábyrgur fyrir að uppfæra tímabreytan og breyta hesti. The hashchange atburður er á gluggi mótmæla; Þegar það fer fram skaltu ganga úr skugga um að kjötið sé til staðar. Í alvöru forriti vilt þú líka að ganga úr skugga um að það hafi gild gildi. Næst seturðu gildi tímanna til að vera númerið í kjötkássunni. Að lokum uppfærir þú skjalið til að endurspegla rétta blaðsíðuna. Við skulum skoða þennan nýja kóða:

  1. Eins og áður hefur kjötið í vefslóðinni verið uppfært þegar notandinn smellir.
  2. En nú þegar Back-hnappinn er smellt er kveikt á byltunaraðgerðinni og blaðsíðan er endurstillt til að passa við vefslóðina.

Notkun location.hash

Staðsetningin.hash eignin og tengd skiptihendaviðburðurinn eru gagnleg ef þú vilt taka tilteknar skoðanir af umsókn þinni og leyfa notandanum að sigla á milli þeirra. Google Mail notar þessa aðferð með því að leyfa þér að fara á milli pósthólfsins (#inbox), tengiliðana (#contacts) og aðrar skoðanir. Ef þú ert með Gmail reikning skaltu skoða hvað er að gerast með slóðinni þegar þú vafrar á mismunandi síðum og smelltu síðan aftur.

En eins og langt er að upplýsingar ríkja, þá leyfir kjötið aðeins að geyma streng. Þú gætir umritað flóknari hlut en slóðin myndi fljótlega verða löng og ómeðhöndin og myndi ekki vera eftirminnilegt fyrir notendur þína. Ef þú þarft flóknara upplýsingar sem eru geymdar sem hluti af sögunni, þá væri betra að nota hakkinn sem lykillinn að því að draga frekari upplýsingar frá einhverjum verslunum. Þó að þú gætir rúlla eigin nálgun á þessu, hefur HTML5 veitt API til að gera það fyrir þig í gegnum history.pushState () aðferðina og popstate atburðinn. Þessar aðferðir leyfa þér að vista og endurhlaða flókna hluti.

Yfirlit

Þú hefur lært að því að stjórna sögu vafrans er hægt að gera bakhnappinn hegða sér á skynsamlegri hátt í tengslum við umsókn þína, en örgjörvunarforritið gefur þér aðgang að skipulögðum merkingarfræðilegum upplýsingum í innihald síðunnar.

Hvað notar þú fyrir þessa tækni? Hefur þú þróað aðra aðferð? Láttu okkur vita í athugasemdunum.

Valin mynd / smámynd, farðu aftur í myndina um Shutterstock.

javascript forrit afturhnappur halló html5 og css sögu api ræna fólkið