Kode

Sådan styres Back-knappen med JavaScript

Et stort problem med JavaScript-baserede applikationer er, at de bryder tilbage-knappen. Hvis du opdaterer indhold på siden med JavaScript i stedet for at indlæse en ny side fra serveren, er der ikke indtastet noget i browserens historie; så når brugeren klikker på Tilbage, forventer at gå tilbage til den tidligere tilstand, kommer de i stedet på det forrige websted i stedet.

Træk og slip er en fantastisk måde for brugerne at interagere med dine webapplikationer. Men brugervenligheden vil gå tabt, hvis brugerne, efter at have brugt tid til at bevæge sig gennem din ansøgning, klikker på knappen Tilbage, forventer at gå tilbage til en side og i stedet gå tilbage til deres startskærm. I denne artikel "Hej! HTML5 & CSS3 "forfatteren Rob Crowther viser dig, hvordan du bruger HTML5-historien API til at undgå den skæbne.

Problemet kan blot demonstreres. Alt du behøver er en funktion, der opdaterer siden som svar på brugeraktivitet: 

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

og en lille markering: 

Click Me
Recorded 0 clicks

I virkeligheden ville din webside gøre noget mere kompliceret, som at hente nyt indhold fra serveren via AJAX, men en simpel opdatering er nok til at demonstrere konceptet. Lad os se, hvad der sker, når brugeren besøger siden.

  1. Brugeren starter på deres hjemmeside og beslutter at besøge den fantastiske Click Me applikation, de har hørt om.
  2. De skriver i webadressen eller følger et link fra en e-mail for at komme til Click Me-siden.
  3. Efter et par sekunder af fornøjelig interaktion er sidestaten ændret flere gange.
  4. Men når brugeren klikker på knappen Tilbage i browseren, finder de, at de i stedet for at gå tilbage til en tidligere side tilstand springer til deres hjemmeside.

Funktionen doclick () kan opdateres for at udnytte historik-API'en. Hver gang siden opdateres, vil den også indstille location.hash: 

function doclick() {times++;location.hash = times;document.getElementById('message').innerHTML ='Recorded ' + times + ' clicks';}
  1. Brugeren ankommer til Click Me siden som før.
  2. Bemærk, at webadressen opdateres efter hvert klik - "#" er optrådt i slutningen af ​​det.
  3. Når du klikker på knappen Tilbage, tager placeringen nu tilbage til # 2, hvilket viser, at sidestatistikker er blevet tilføjet til historien. Men bemærk at klik på knappen Tilbage ikke automatisk returnerer siden til sin tidligere tilstand.

Opdatering af side tilstand

Opdatering af historien er kun en del af problemet; du skal også kunne opdatere tilstanden på siden for at matche staten i historien.

Fordi du er den, der styrer historien, er det op til dig at administrere sidestatus. For at opdatere din side som svar på location.hash bliver ændret, kan du lytte til hashchange-arrangementet: 

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

Funktionen doclick () er nu kun ansvarlig for opdatering af tidsvariablen og ændring af hash. The hashchange-hændelsen er på vinduesobjektet; Når det sker, skal du kontrollere, at hash eksisterer. I en rigtig applikation vil du også gerne kontrollere, at den havde en gyldig værdi. Derefter indstiller du værdien af ​​gange til at være nummeret i hasen. Endelig opdaterer du dokumentet for at afspejle den korrekte side tilstand. Lad os se på denne nye kode:

  1. Som tidligere opdateres hash'en i webadressen, som brugeren klikker på.
  2. Men nu, når Back-knappen er klikket, udløses onhashchange-funktionen, og siden tilstanden er nulstillet for at matche webadressen.

Brug af location.hash

Ejendommen location.hash og den tilhørende hashchange-begivenhed er nyttige, hvis du vil tagge bestemte visninger af din ansøgning og tillade brugeren at navigere mellem dem. Google Mail bruger denne tilgang ved at tillade dig at navigere mellem din indbakke (#inbox), kontakter (#contacts) og andre visninger. Hvis du har en Gmail-konto, skal du se på, hvad der sker med URL'en, når du navigerer til forskellige sider og klik derefter tilbage.

Men så vidt statsinformationen går, kan hash kun lade dig gemme en streng. Du kan kode en mere kompleks genstand, men URL'en vil hurtigt blive lang og uhåndterlig og vil ikke være mindeværdig for dine brugere. Hvis du har brug for mere komplekse oplysninger gemt som en del af historien, ville en bedre tilgang være at bruge hash som en nøgle til at trække yderligere statsoplysninger ud af nogle butikker. Selv om du kunne rulle din egen tilgang til dette, har HTML5 givet en API til at gøre det for dig gennem history.pushState () -metoden og popstate-begivenheden. Disse metoder giver dig mulighed for at gemme og genindlæse et komplekst objekt.

Resumé

Du har lært, at styring af browserens historie giver dig mulighed for at gøre Back-knappen på en mere fornuftig måde i forbindelse med din ansøgning, mens microdata API giver dig adgang til struktureret semantisk information i sideindhold.

Hvilke anvendelser forestiller du sig for denne teknik? Har du udviklet en anden metode? Lad os vide i kommentarerne.

Fremhævet billede / miniaturebillede, gå tilbage billede via Shutterstock.

javascript applikationer tilbage knap hej html5 & css historie api røve crowther