Koodi

Kuinka hallita Takaisin-painiketta JavaScriptin avulla

Yksi tärkeä aihe JavaScript-pohjaisten sovellusten kanssa on, että ne rikkovat Back-painiketta. Jos päivität sivulla olevan sisällön JavaScriptin sijaan, kun lataat uuden sivun palvelimelta, mitään merkintää ei ole selaimen historiassa; joten kun käyttäjä napsauttaa Takaisin, odottaa palaavan edelliseen tilaan, he päätyvät edelliseen sivustoon.

Vedä ja pudota on hieno tapa käyttäjien kanssa vuorovaikutuksessa web-sovellusten kanssa. Käytännöllisyysvaatimukset menetetään kuitenkin, jos käyttäjä viettää aikaa sovelluksensa kautta. Käyttäjät napsauttavat Takaisin-painiketta, joka odottaa palaavan sivun ja palaa sen sijaan takaisin aloitusnäyttöön. Tässä artikkelissa "Hei! HTML5 & CSS3 "-kirjoittaja Rob Crowther näyttää, kuinka voit käyttää HTML5-historia-API: tä välttääksesi kohtalosta.

Ongelma voidaan osoittaa yksinkertaisesti. Kaikki mitä tarvitset on toiminto, joka päivittää sivun vastauksena käyttäjän toimintaan: 

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

ja pieni merkintä: 

Click Me
Recorded 0 clicks

Todellisessa elämässä verkkosivusi tekisi jotain monimutkaisempaa, kuten uuden sisällön hakeminen palvelimelta AJAX: n kautta, mutta yksinkertainen päivitys riittää osoittamaan käsitteen. Katsotaan, mitä tapahtuu, kun käyttäjä vierailee sivulla.

  1. Käyttäjä aloittaa kotisivullaan ja päättää käydä hämmästyttävän Click Me -sovelluksen, jonka he ovat kuulleet.
  2. He kirjoittavat URL-osoitteen tai seuraavat linkkiä sähköpostiviestistä napsauttamalla Click Me -sivua.
  3. Muutaman sekunnin nautinnollisen vuorovaikutuksen jälkeen sivutila on muuttunut useita kertoja.
  4. Mutta kun käyttäjä napsauttaa Takaisin-painiketta selaimessa, he löytävät sen, että he palaavat edelliseen sivutilaansa siirtymällä heidän kotisivulleen.

Doclick () -toimintoa voidaan päivittää hyödyntämällä historia-API. Joka kerta, kun sivu päivitetään, se asettaa myös sijainnin.hash: 

function doclick() {times++;location.hash = times;document.getElementById('message').innerHTML ='Recorded ' + times + ' clicks';}
  1. Käyttäjä saapuu Click Me -sivulle kuten aiemmin.
  2. Huomaa, että nyt URL-osoite päivitetään jokaisen klikkauksen jälkeen - "#" on ilmestynyt sen lopussa.
  3. Takaisin-painikkeen napsautus vie sijainnin takaisin # 2, mikä osoittaa, että sivun tilat on onnistuneesti lisätty historiaan. Huomaa kuitenkin, että Takaisin-painikkeen napsautus ei palauta sivua automaattisesti edelliseen tilaan.

Sivun tilan päivittäminen

Historian päivittäminen on vain osa ongelmaa; sinun on myös pystyttävä päivittämään sivun tila, jotta se vastaisi tilannetta historiassa.

Koska hallitset historiaa, sinun on hallittava sivutilaa. Jotta päivität sivusi vastauksena location.hashin muuttamiseen, voit kuunnella hashchange-tapahtuman: 

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

Doclick () -toiminto on vastannut vain ajankohtaisen muuttujan päivittämisestä ja hash: n muuttamisesta. Hajautustapahtuma on ikkunakohteessa; kun se tapahtuu, tarkista, että hash on olemassa. Todellisessa sovelluksessa kannattaa myös tarkistaa, että sillä oli kelvollinen arvo. Seuraavaksi asetat kellonajan lukumäärän hajautusarvoon. Lopuksi päivität asiakirjan vastaamaan oikeaa sivun tilaa. Katsotaanpa tätä uutta koodia:

  1. Kuten aiemmin, URL-osoitteiden hajautus päivittyy käyttäjän napsautuksella.
  2. Mutta nyt, kun Takaisin-painiketta napsautetaan, onhashchange-toiminto käynnistyy ja sivutila nollataan vastaamaan URL-osoitetta.

Sijainnin.hash

Location.hash-ominaisuus ja siihen liittyvä hashchange-tapahtuma ovat hyödyllisiä, jos haluat merkitä sovelluksen tietyt näkymät ja sallia käyttäjän siirtyä niiden välillä. Google Mail käyttää tätä lähestymistapaa, jonka avulla voit siirtyä postilaatikon (#inbox), yhteystietojen (#contacts) ja muiden näkymien välillä - jos sinulla on Gmail-tili, katso mitä tapahtuu URL-osoitteelle, kun siirryt eri sivuille ja klikkaa sitten takaisin.

Mutta siltä osin kuin valtion tiedot menee, hajauttaa vain voit tallentaa merkkijono. Voit koodata monimutkaisempaa kohdetta, mutta URL nopeasti muuttuisi pitkäksi ja vaivalloiseksi, eikä se olisi käyttäjän muistoilua. Jos tarvitset entistä monimutkaisempia tietoja, jotka on tallennettu osana historiaa, parempi lähestymistapa olisi käyttää hashia avaimenaan saada lisää tilatietoja pois jostakin kaupasta. Vaikka voit kehittää oman lähestymistapasi tähän, HTML5 on antanut sovellusliittymän, jonka avulla voit tehdä sen historian history.pushState () -menetelmän ja popstate-tapahtuman kautta. Näiden menetelmien avulla voit tallentaa ja ladata monimutkaisen objektin.

Yhteenveto

Olet oppinut, että selaimen historian hallinnan avulla Back-näppäin käyttäytyy järkevämmällä tavalla sovelluksen yhteydessä, kun taas mikrotason sovellusliittymä antaa sinulle pääsyn strukturoituihin semanttisiin tietoihin sivun sisällössä.

Mitä käytätte tällä tekniikalla? Oletko kehittänyt toisenlaisen menetelmän? Kerro meille kommentit.

Esitetty kuva / pikkukuva, palaa takaisin kuvaan kautta Shutterstock.

javascript-sovelluksia takaisin nappi hello html5 & css historia api ryöstäkää