Et stort problem med JavaScript-baserte applikasjoner er at de bryter tilbake-knappen. Hvis du oppdaterer innhold på siden med JavaScript i stedet for å laste inn en ny side fra serveren, er det ikke lagt inn noe i nettleserloggen. så når brukeren klikker Tilbake, og forventer å gå tilbake til forrige tilstand, kommer de til slutt på det forrige stedet i stedet.

Dra og slipp er en fin måte for brukerne å samhandle med webapplikasjonene dine. Men bruksvinstene vil gå tapt hvis du bruker tid på å flytte gjennom søknaden din, klikker du på Back-knappen, og ventes å gå tilbake til en side og gå tilbake til startskjermbildet. I denne artikkelen "Hei! HTML5 og CSS3 "forfatteren Rob Crowther viser deg hvordan du bruker HTML5-historikk-APIen for å unngå den skjebnen.

Problemet kan enkelt demonstreres. Alt du trenger er en funksjon som oppdaterer siden som svar på brukeraktivitet:

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

og et lite oppslag:

Click Me
Recorded 0 clicks

I virkeligheten ville websiden din gjøre noe mer komplisert, for eksempel å hente nytt innhold fra serveren via AJAX, men en enkel oppdatering er nok til å demonstrere konseptet. La oss se hva som skjer når brukeren besøker siden.

  1. Brukeren starter på hjemmesiden sin og bestemmer seg for å besøke den fantastiske Click Me applikasjonen de har hørt om.
  2. De skriver inn nettadressen eller følger en lenke fra en e-post for å komme til Click Me-siden.
  3. Etter noen få sekunder med hyggelig interaksjon, har sidestaten endret seg flere ganger.
  4. Men når brukeren klikker på knappen Tilbake i nettleseren, finner de at de i stedet for å gå tilbake til en forrige side, hopper til hjemmesiden sin.

Funksjonen doclick () kan oppdateres for å utnytte historikk-APIen. Hver gang siden er oppdatert, vil den også sette posisjonen.hash:

function doclick() {times++;location.hash = times;document.getElementById('message').innerHTML ='Recorded ' + times + ' clicks';}
  1. Brukeren kommer til Click Me siden som før.
  2. Legg merke til at nettadressen nå oppdateres etter hvert klikk - "#" har dukket opp på slutten av det.
  3. Når du klikker på Tilbake-knappen, tar plasseringen tilbake til # 2, og viser at sidestatistikker har blitt lagt til i historien. Men vær oppmerksom på at klikke på Tilbake-knappen ikke automatisk returnerer siden til sin tidligere tilstand.

Oppdaterer sidestatus

Oppdatering av historien er bare en del av problemet; Du må også kunne oppdatere status på siden for å matche staten i historien.

Fordi du er den som styrer historien, er det opp til deg å administrere sidestaten. For å oppdatere siden din som svar på location.hash blir endret, kan du lytte til hashchange-hendelsen:

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';}

Funksjonen doclick () er nå bare ansvarlig for oppdatering av tidsvariabelen og endring av hash. The hashchange-hendelsen er på vinduet objektet; Når det skjer, kontroller du at hash eksisterer. I en ekte applikasjon vil du også kontrollere at den hadde en gyldig verdi. Deretter angir du verdien av ganger som nummeret i hasen. Endelig oppdaterer du dokumentet for å gjenspeile riktig sidestatus. La oss se på denne nye koden:

  1. Som tidligere blir hashen i nettadressen oppdatert når brukeren klikker.
  2. Men nå, når Back-knappen er klikket, utløses byttevekslingsfunksjonen, og sidestatusen tilbakestilles for å matche URL-adressen.

Bruke location.hash

Egenskapen Location.hash og tilhørende hashchange-hendelse er nyttige hvis du vil merke bestemte visninger av søknaden din og la brukeren navigere mellom dem. Google Mail bruker denne tilnærmingen ved å la deg navigere mellom innboksen din (#inbox), kontakter (#contacts) og andre visninger. Hvis du har en Gmail-konto, se hva som skjer med nettadressen når du navigerer til forskjellige sider og klikk deretter tilbake.

Men så langt som statlig informasjon går, kan hash bare lagre en streng. Du kan kode for et mer komplisert objekt, men nettadressen vil raskt bli lang og uhåndterlig og vil ikke være minneverdig for brukerne. Hvis du trenger mer komplisert informasjon lagret som en del av historien, ville en bedre tilnærming være å bruke hash som en nøkkel til å trekke videre statsinformasjon ut av noen butikk. Selv om du kunne rulle din egen tilnærming til dette, har HTML5 gitt en API for å gjøre det for deg gjennom history.pushState () -metoden og popstate-hendelsen. Disse metodene lar deg lagre og laste inn et komplisert objekt.

Sammendrag

Du har lært at styring av nettleserens historie gjør det mulig å få tilbake-knappen på en fornuftig måte i sammenheng med søknaden din, mens microdata API gir deg tilgang til strukturert semantisk informasjon i sidens innhold.

Hva bruker du for denne teknikken? Har du utviklet en annen metode? Gi oss beskjed i kommentarene.

Utvalgt bilde / miniatyrbilde, gå tilbake bilde via Shutterstock.